jQuery validate：如何为正则表达式验证添加规则？

240

我正在使用jQuery验证插件。好东西！我想迁移我现有的ASP.NET解决方案以使用jQuery而不是ASP.NET验证器。我缺少正则表达式验证器的替代品。我希望能够做这样的事情：

$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}$" })

如何添加自定义规则来实现此目的？

jquery  regex  jquery-validate 
— 彼得·科隆
source
1
请说您正在检查输入服务器端，而不仅仅是依靠客户端验证，因为显然可以将其关闭。
— S Philp
当然！:-)必须在服务器上进行验证
— PeterFromCologne 2009年
121
天哪，没有正则表达式验证？！
— 2009年
4
我的意思是，无论如何，谁想要正则表达式进行验证... ...;）
— jamiebarrow

Answers:

329

感谢redsquare的回答，我添加了这样的方法：

$.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Please check your input."
);

现在，您需要针对任何正则表达式进行验证的所有操作是：

$("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}$" })

此外，似乎还有一个名为Additional-methods.js的文件，其中包含方法“ pattern”，当使用不带引号的方法创建该文件时，它可以是RegExp。

编辑

pattern现在，该函数是执行此操作的首选方法，例如：

 $("#Textbox").rules("add", { pattern: "^[a-zA-Z'.\\s]{1,40}$" })

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js

— 彼得·科隆
source
4
$（“ Textbox”）应该是$（“＃Textbox”）。
— 瑞安·史里帕特
3
我将不得不让正则表达式可以在方法为文字以外定义的，而不是从一个字符串的调用，..
— Tracker1
3
这是超级有用的，应该包含在jquery中：(
— Grahame
3
或将其添加到验证器中，如下所示：...规则：{textbox_input_name_attr：{必需：true，正则表达式：“ ^ [a-zA-Z'。\\ s] {1,50} $”}}，... 。
— 汉斯Kerkhof的
2
您输入这样的自定义消息：$（'＃element'）。rules（'add'，{regex：/ [abc] /，messages {regex：“ custom message'}}））;
— naspinski 2014年
80

您可以使用addMethod（）

例如 

$.validator.addMethod('postalCode', function (value) { 
    return /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/.test(value); 
}, 'Please enter a valid US or Canadian postal code.');

好文章在这里https://web.archive.org/web/20130609222116/http://www.randallmorey.com/blog/2008/mar/16/extending-jquery-form-validation-plugin/

— 红方格
source
6
不要真的回答这个问题。如果您需要通用的正则表达式规则怎么办？有了这个答案，您将不得不为每个不同的正则表达式添加方法。
— AndreasN
43

我在将所有片段组合在一起以进行jQuery正则表达式验证器时遇到了一些麻烦，但是我确实可以正常工作了……这是一个完整的工作示例。它使用可以在jQuery Validation插件中找到的“ Validation” 插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://YOURJQUERYPATH/js/jquery.js" type="text/javascript"></script>
    <script src="http://YOURJQUERYPATH/js/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">

        $().ready(function() {
            $.validator.addMethod("EMAIL", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
            }, "Email Address is invalid: Please enter a valid email address.");

            $.validator.addMethod("PASSWORD",function(value,element){
                return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/i.test(value);
            },"Passwords are 8-16 characters with uppercase letters, lowercase letters and at least one number.");

            $.validator.addMethod("SUBMIT",function(value,element){
                return this.optional(element) || /[^ ]/i.test(value);
            },"You did not click the submit button.");

            // Validate signup form on keyup and submit
            $("#LOGIN").validate({
                rules: {
                    EMAIL: "required EMAIL",
                    PASSWORD: "required PASSWORD",
                    SUBMIT: "required SUBMIT",
                },
            });
        });
    </script>
</head>
<body>
    <div id="LOGIN_FORM" class="form">
        <form id="LOGIN" name="LOGIN" method="post" action="/index/secure/authentication?action=login">
            <h1>Log In</h1>
            <div id="LOGIN_EMAIL">
                <label for="EMAIL">Email Address</label>
                <input id="EMAIL" name="EMAIL" type="text" value="" tabindex="1" />
            </div>
            <div id="LOGIN_PASSWORD">
                <label for="PASSWORD">Password</label>
                <input id="PASSWORD" name="PASSWORD" type="password" value="" tabindex="2" />
            </div>
            <div id="LOGIN_SUBMIT">
                <input id="SUBMIT" name="SUBMIT" type="submit" value="Submit" tabindex="3" />
            </div>
        </form>
    </div>
</body>
</html>
— bshack
source
25

没有理由将正则表达式定义为字符串。

$.validator.addMethod(
    "regex",
    function(value, element, regexp) {
        var check = false;
        return this.optional(element) || regexp.test(value);
    },
    "Please check your input."
);

和

telephone: { required: true, regex : /^[\d\s]+$/, minlength: 5 },

这样更好吗，不是吗？

— 山姆
source
为此需要哪个js？
— 巴维克·安巴尼
实际上，刚刚发现了一个问题。如果使用g标志，则会得到不一致的结果。g标志显然创建了它自己的索引（请参阅：stackoverflow.com/questions/209732/…）。因此，您需要在函数中重新定义正则表达式，以便每次调用它时都会重新创建它。
— rob_james 2014年
1
要添加到：还是把它定义为一个正则表达式，如上面（或你必须用标志字符串>正则表达式转换的问题），但除了它仍然需要var re = new RegExp(regexp);在功能
— rob_james
24

扩展PeterTheNiceGuy的答案：

$.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
            return this.optional(element) || regexp.test(value);
        },
        "Please check your input."
);

这将允许您将正则表达式对象传递给规则。

$("Textbox").rules("add", { regex: /^[a-zA-Z'.\s]{1,40}$/ });

在对象上设置-flag lastIndex时，必须重置属性。否则，即使主题字符串不同，它也会从与该正则表达式的最后一个匹配项的位置开始进行验证。gRegExp

我还有其他一些想法，那就是使您能够使用正则表达式的数组，以及另一个否定正则表达式的规则：

$("password").rules("add", {
    regex: [
        /^[a-zA-Z'.\s]{8,40}$/,
        /^.*[a-z].*$/,
        /^.*[A-Z].*$/,
        /^.*[0-9].*$/
    ],
    '!regex': /password|123/
});

但是实施这些可能会太多。

— 马库斯·贾德洛（Markus Jarderot）
source
我想以JQgrid的添加形式进行正则表达式验证。我怎样才能做到这一点 ？
— 巴维克·安巴尼
@BhavikAmbani您可以使用自定义函数进行验证。有关示例，请参见Wiki。
— 马库斯·贾德罗
19

如addMethod文档中所述：

请注意：尽管添加一个regex方法以检查其参数是否与该值很有吸引力，但将那些正则表达式封装在它们自己的方法中要干净得多。如果需要许多稍微不同的表达式，请尝试提取一个公共参数。正则表达式库：http : //regexlib.com/DisplayPatterns.aspx

因此，是的，您必须为每个正则表达式添加一个方法。开销是最小的，尽管它允许您为正则表达式命名（不要低估），默认消息（方便）以及在不同位置重用正则表达式的能力，而不必一遍又一遍地复制正则表达式本身。

— 约恩·泽弗勒（JörnZaefferer）
source
您的回答令人感动！谢谢。我会再考虑一下。就我们而言，正则表达式验证似乎是最合适的。但是，我理解您使用“命名”验证的意思……
— PeterFromCologne 2009年
我想以JQgrid的添加形式进行正则表达式验证。我怎样才能做到这一点 ？
— 巴维克·安巴尼
14

我让它像这样工作：

$.validator.addMethod(
    "regex",
    function(value, element, regexp) {
        return this.optional(element) || regexp.test(value);
    },
    "Please check your input."
);


$(function () {
    $('#uiEmailAdress').focus();
    $('#NewsletterForm').validate({
        rules: {
            uiEmailAdress:{
                required: true,
                email: true,
                minlength: 5
            },
            uiConfirmEmailAdress:{
                required: true,
                email: true,
                equalTo: '#uiEmailAdress'
            },
            DDLanguage:{
                required: true
            },
            Testveld:{
                required: true,
                regex: /^[0-9]{3}$/
            }
        },
        messages: {
            uiEmailAdress:{
                required: 'Verplicht veld',
                email: 'Ongeldig emailadres',
                minlength: 'Minimum 5 charaters vereist'
            },
            uiConfirmEmailAdress:{
                required: 'Verplicht veld',
                email: 'Ongeldig emailadres',
                equalTo: 'Veld is niet gelijk aan E-mailadres'
            },
            DDLanguage:{
                required: 'Verplicht veld'
            },
            Testveld:{
                required: 'Verplicht veld',
                regex: '_REGEX'
            }
        }
    });
});

确保正则表达式介于/:-) 之间

— 克里斯·诺贝尔
source
我想以JQgrid的添加形式进行正则表达式验证。我怎样才能做到这一点 ？
— 巴维克·安巴尼
12

您可以使用pattern在additional-methods.js文件中定义的。请注意，必须在 jQuery Validate依赖项之后包含此extra-methods.js文件，然后才可以使用

$("#frm").validate({
    rules: {
        Textbox: {
            pattern: /^[a-zA-Z'.\s]{1,40}$/
        },
    },
    messages: {
        Textbox: {
            pattern: 'The Textbox string format is invalid'
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<form id="frm" method="get" action="">
    <fieldset>
        <p>
            <label for="fullname">Textbox</label>
            <input id="Textbox" name="Textbox" type="text">
        </p>
    </fieldset>
</form>
展开摘要

— 维克多·史翠比维
source
5

这是工作代码。

function validateSignup()
{   
    $.validator.addMethod(
            "regex",
            function(value, element, regexp) 
            {
                if (regexp.constructor != RegExp)
                    regexp = new RegExp(regexp);
                else if (regexp.global)
                    regexp.lastIndex = 0;
                return this.optional(element) || regexp.test(value);
            },
            "Please check your input."
    );

    $('#signupForm').validate(
    {

        onkeyup : false,
        errorClass: "req_mess",
        ignore: ":hidden",
        validClass: "signup_valid_class",
        errorClass: "signup_error_class",

        rules:
        {

            email:
            {
                required: true,
                email: true,
                regex: /^[A-Za-z0-9_]+\@[A-Za-z0-9_]+\.[A-Za-z0-9_]+/,
            },

            userId:
            {
                required: true,
                minlength: 6,
                maxlength: 15,
                regex: /^[A-Za-z0-9_]{6,15}$/,
            },

            phoneNum:
            {
                required: true,
                regex: /^[+-]{1}[0-9]{1,3}\-[0-9]{10}$/,
            },

        },
        messages: 
        {
            email: 
            {
                required: 'You must enter a email',
                regex: 'Please enter a valid email without spacial chars, ie, Example@gmail.com'
            },

            userId:
            {
                required: 'Alphanumeric, _, min:6, max:15',
                regex: "Please enter any alphaNumeric char of length between 6-15, ie, sbp_arun_2016"
            },

            phoneNum: 
            {
                required: "Please enter your phone number",
                regex: "e.g. +91-1234567890"    
            },

        },

        submitHandler: function (form)
        {
            return true;
        }
    });
}
— 阿伦·达瓦吉（ArunDhwaj）IIITH
source
3

当正则表达式中存在标志时，我们主要使用jquery验证插件的标记符号，并且发布的示例对我们不起作用，例如

<input type="text" name="myfield" regex="/^[0-9]{3}$/i" />

因此，我们使用以下代码段

$.validator.addMethod(
        "regex",
        function(value, element, regstring) {
            // fast exit on empty optional
            if (this.optional(element)) {
                return true;
            }

            var regParts = regstring.match(/^\/(.*?)\/([gim]*)$/);
            if (regParts) {
                // the parsed pattern had delimiters and modifiers. handle them. 
                var regexp = new RegExp(regParts[1], regParts[2]);
            } else {
                // we got pattern string without delimiters
                var regexp = new RegExp(regstring);
            }

            return regexp.test(value);
        },
        "Please check your input."
);

当然，现在可以将这段代码与上面的代码之一结合起来，以允许将RegExp对象传递到插件中，但是由于我们不需要它，因此我们将本练习留给读者;-)。

PS：还有捆绑的插件，https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js

— 稳定
source
1

这对我有用，它是验证规则之一：

    Zip: {
                required: true,
                regex: /^\d{5}(?:[-\s]\d{4})?$/
            }

希望能帮助到你

— 博格丹伴侣
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.