JQuery验证Regex规则不起作用

JQuery Validate Regex Rule Not Working

本文关键字：不起作用 规则 Regex 验证 JQuery      更新时间：2023-09-26

我有一个用于jQuery Validate的正则表达式规则设置。但是，一旦启用高亮显示方法，无论我在字段中键入什么，我似乎都无法启用取消高亮显示方法。

这是一个示例：

<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方法的内容设置了一个断点，但似乎从未命中。

因为您没有将正则表达式传递给匹配项，所以您正在传递字符串

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

演示：Fiddle

此外，不需要编写新的方法来使用regex验证，jQuery-validator的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

相关文章：