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方法的內容設置了一個斷點，但它似乎從未受到影響。

來源

2014-09-04 eat-sleep-code

另請注意，你的'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

來源

2014-09-04 03:38:37

JQuery驗證正則表達式規則不起作用

回答

相關問題