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