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

Question

我有一個用於jQuery Validate的正則表達式規則設置。 但是，一旦高亮方法被觸發，無論我在字段中鍵入什么內容，我似乎都無法觸發Unhighlight方法。

這是一個示例：

<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個字母，則應匹配正則表達式，並清除錯誤消息。 但是，這沒有發生。 我在unhighlight方法的內容上在Google Chrome開發人員工具中設置了一個斷點，但似乎從未遇到過斷點。

Answer 1

因為您沒有將正則表達式傳遞給匹配項，所以您傳遞的是字符串

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

演示：小提琴

另外，也無需編寫新方法來使用正則表達式驗證，jQuery驗證程序的extra-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."
         }
     }
 });

演示：小提琴

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

問題描述

1 個解決方案

解決方案1
2 已采納 2014-09-04 03:38:37

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

問題描述

1 個解決方案

解決方案1 2 已采納 2014-09-04 03:38:37

解決方案1
2 已采納 2014-09-04 03:38:37