jQuery验证:如何添加正则表达式验证规则?

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

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

如何添加自定义规则来实现这一目标?

感谢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。

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

ajax/jquery.validate/1.9/additional-methods.js

你可以使用addMethod()

例如

 $.validator.addMethod('postalCode', function (value) { return /^((\d{5}-\d{4})|(\d{5})|([AZ]\d[AZ]\s\d[AZ]\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/

我做了一个jQuery正则表达式验证器的所有部分,我有一些麻烦,但我得到它的工作…这是一个完整的工作示例。 它使用可在jQuery验证插件中找到的“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)(?=.*[az])(?=.*[AZ]).{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> 

正如addMethod文档中提到的:

请注意:虽然添加一个正则表达式的方法非常好,但是将这些正则表达式封装在自己的方法中会更加简洁。 如果您需要大量稍微不同的表达式,请尝试提取常用参数。 正则表达式库: http : //regexlib.com/DisplayPatterns.aspx

所以是的,你必须为每个正则表达式添加一个方法。 开销是最小的,它允许你给正则表达式一个名字(不要被低估),一个默认的消息(方便),并且能够在不同的地方重复使用,而不会一遍又一遍地重复正则表达式本身。

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

 $.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 }, 

这样比较好,不是吗?

扩展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}$/ }); 

RegExp对象上设置g标志时,重置lastIndex属性是必要的。 否则,即使主题字符串不同,它也会从该正则表达式的最后一个匹配位置开始验证。

我有一些其他的想法是让你使用正则表达式的数组,另一个规则否定正则表达式的:

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

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

我得到这样的工作:

 $.validator.addMethod( "regex", function(value, element, regexp) { var check = false; 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' } } }); }); 

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

这是工作代码。

 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: "eg +91-1234567890" }, }, submitHandler: function (form) { return true; } }); } 

我们主要使用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

这对我来说是有效的验证规则之一:

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

希望它有帮助

您可以使用additional-methods.js文件中定义的pattern 。 注意,这个additional-methods.js文件必须包含 jQuery Validate依赖关系之后,那么你可以直接使用

 $("#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>