JQuery验证正则表达式规则不起作用

问题描述：

我有一个jQuery验证的正则表达式规则设置。但是，一旦突出显示方法被触发，无论我在该字段中输入什么内容，似乎都无法启动Unhighlight方法。JQuery验证正则表达式规则不起作用

下面是一个示例：

<html> 
<head> 
    <title>test</title> 
    <link rel="stylesheet" href="http://eat-sleep-code.com/style/jquery-ui.min.css" /> 
    <link rel="stylesheet" href="http://eat-sleep-code.com/style/bootstrap.min.css" /> 
    <link rel="stylesheet" href="http://eat-sleep-code.com/style/bootstrap-theme.min.css" /> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="http://eat-sleep-code.com/scripts/bootstrap.min.js"></script> 
    <script type="text/javascript" src="http://eat-sleep-code.com/scripts/jquery.validate.min.js" defer="defer"></script>  
</head> 
<body> 
    <form> 
     <fieldset> 
      <legend> 
       Example Form  
      </legend> 
      <ol> 
       <li id="ExampleInputRow"> 
        <input type="text" id="ExampleInput" name="ExampleInput" class="form-control" maxlength="256" /> 
       </li> 
      </ol> 
     </fieldset> 
    </form> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     var lettersNumbersOnlyMinMaxCharactersRegex = '/^[a-z0-9]{8,32}$/ig'; 

     $.validator.addMethod('lettersNumbersOnlyMinMaxCharacters', function (value, element, parameter) { 
      return value.match(lettersNumbersOnlyMinMaxCharactersRegex); 
     }, ''); 

     $.validator.setDefaults({ 
      errorPlacement: function(error, element){ 
       $(error).insertBefore($(element)); 
      }, 
      highlight: function(element, errorClass) { 
       $(element).parent().removeClass('has-success').addClass('has-error'); 
      }, 
      unhighlight: function(element, errorClass, validClass) { 
       $(element).parent().removeClass('has-error').addClass('has-success'); 
      }, 
      invalidHandler: function(event, validator) { 
       setTimeout(function(){ 
        $('input:text').blur(); 
        $('input:password').blur(); 
        $('textarea').blur(); 
       }, 10); 
      }, 
      onkeyup: function (element) { 
        $('#ExampleInput').valid(); 
      } 
     }); 


     var validator = $("form").validate({ 
      rules: { 
       ExampleInput: {lettersNumbersOnlyMinMaxCharacters: true}  
      }, 
      messages: { 
       ExampleInput: {lettersNumbersOnlyMinMaxCharacters: "You must enter between 8 and 32 numbers and letters."} 
      } 
     }); 

     function Validate() { 
      return $('form').valid(); 
     } 

    }); 
</script>

如果键入8个字母正则表达式应该匹配和错误消息应被清除。但是这没有发生。我在Google Chrome开发人员工具中为unhighlight方法的内容设置了一个断点，但它似乎从未受到影响。

另请注意，你的'onkeyup'回调函数里面不应该有'.valid（）'，'$（'＃ExampleInput'）'应该是什么？你应该有'this.element（element）'在这个回调中触发验证，而不是'.valid（）'。 – Sparky 2014-09-04 14:21:51

答

因为你是不是传递一个正则表达式匹配，要传递一个字符串

var lettersNumbersOnlyMinMaxCharactersRegex = /^[a-z0-9]{8,32}$/ig;

演示：Fiddle

也没有必要写使用的新方法正则表达式验证，jQuery验证器的additional-method.js有一个叫做pattern的规则，可以用于此目的

var lettersNumbersOnlyMinMaxCharactersRegex = /^[a-z0-9]{8,32}$/ig; 
var validator = $("form").validate({ 
    rules: { 
     ExampleInput: { 
      pattern: lettersNumbersOnlyMinMaxCharactersRegex 
     } 
    }, 
    messages: { 
     ExampleInput: { 
      lettersNumbersOnlyMinMaxCharacters: "You must enter between 8 and 32 numbers and letters." 
     } 
    } 
});

演示：Fiddle

JQuery验证正则表达式规则不起作用

相关推荐