jQuery validate:如何为正则表达式验证添加规则?
Posted
技术标签:
【中文标题】jQuery validate:如何为正则表达式验证添加规则?【英文标题】:jQuery validate: How to add a rule for regular expression validation? 【发布时间】:2010-09-21 19:11:19 【问题描述】:我正在使用 jQuery 验证插件。好东西!我想迁移我现有的 ASP.NET 解决方案以使用 jQuery 而不是 ASP.NET 验证器。我缺少 正则表达式 验证器的替代品。我希望能够做这样的事情:
$("Textbox").rules("add", regularExpression: "^[a-zA-Z'.\s]1,40$" )
我如何添加自定义规则来实现这一点?
【问题讨论】:
请说您正在检查输入服务器端,而不仅仅是依赖客户端验证,因为这显然可以关闭。 当然! :-) 服务器上的验证是必须的 OMG 它没有有正则表达式验证?! 我的意思是,无论如何,谁想要正则表达式进行验证... ... ;) 【参考方案1】:感谢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$" )
https://cdnjs.com/libraries/jquery-validate
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js
【讨论】:
$("Textbox") 应该是 $("#Textbox")。 我会让 RegExp 在方法外部定义为文字,而不是从字符串调用.. 这非常有用,应该包含在 jquery 中:( 或者像这样将它添加到验证器中:...规则: textbox_input_name_attr: required: true, regex: "^[a-zA-Z'.\\s]1,50 $" , .... 您输入这样的自定义消息: $('#element').rules('add', regex: /[abc]/, messages regex: "custom message' ) ;【参考方案2】:你可以使用 addMethod()
例如
$.validator.addMethod('postalCode', function (value)
return /^((\d5-\d4)|(\d5)|([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/
【讨论】:
不要真正回答这个问题。如果你想要一个通用的正则表达式规则怎么办?有了这个答案,您必须为每个不同的正则表达式添加方法。【参考方案3】:我在将所有部分放在一起做一个 jQuery 正则表达式验证器时遇到了一些麻烦,但我让它工作了......这是一个完整的工作示例。它使用“验证”插件,可以在 jQuery Validation Plugin
中找到<!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>
【讨论】:
【参考方案4】:没有理由将正则表达式定义为字符串。
$.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 ,
这样更好,不是吗?
【讨论】:
这个需要哪个js? 其实刚刚发现了这个问题。如果您使用 g 标志,您将得到不一致的结果。 g 标志显然创建了它自己的索引(参见:***.com/questions/209732/…)。因此,您需要在函数中重新定义正则表达式,以便在每次调用时重新创建它。 补充一点:仍然将其定义为正则表达式,如上所述(否则您将遇到字符串 > 带有标志的正则表达式转换问题)但此外它仍然需要函数中的var re = new RegExp(regexp);
【参考方案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$/,
/^.*[a-z].*$/,
/^.*[A-Z].*$/,
/^.*[0-9].*$/
],
'!regex': /password|123/
);
但实施这些可能太多了。
【讨论】:
我想要 JQgrid 的添加形式的正则表达式验证。我该怎么做? @BhavikAmbani 您可以使用自定义函数进行验证。有关示例,请参见 the wiki。【参考方案6】:正如addMethod documentation中提到的:
请注意:虽然添加一个正则表达式方法来检查它的参数值是否很诱人,但将这些正则表达式封装在他们自己的方法中会更简洁。如果您需要大量略有不同的表达式,请尝试提取一个公共参数。正则表达式库:http://regexlib.com/DisplayPatterns.aspx
所以是的,您必须为每个正则表达式添加一个方法。开销很小,同时它允许您为正则表达式命名(不可低估)、默认消息(方便)以及在不同地方重用它的能力,而无需一遍又一遍地复制正则表达式本身。
【讨论】:
非常感谢您的回答!谢谢。我会再考虑一下。在我们的例子中,Regex 验证似乎是最合适的。但是,我理解您在使用“命名”验证时的观点......【参考方案7】:我让它像这样工作:
$.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'
);
);
确保正则表达式介于/
:-)
【讨论】:
【参考方案8】:您可以使用 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>
【讨论】:
【参考方案9】:这是工作代码。
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;
);
【讨论】:
【参考方案10】:我们主要使用 jquery 验证插件的标记符号,当正则表达式中存在标志时,发布的示例对我们不起作用,例如
<input type="text" name="myfield" regex="/^[0-9]3$/i" />
因此我们使用下面的sn-p
$.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
【讨论】:
【参考方案11】:这对我有用,是验证规则之一:
Zip:
required: true,
regex: /^\d5(?:[-\s]\d4)?$/
希望对你有帮助
【讨论】:
【参考方案12】: $.validator.methods.checkEmail = function( value, element )
return this.optional( element ) || /[a-z]+@[a-z]+\.[a-z]+/.test( value );
$("#myForm").validate(
rules:
email:
required: true,
checkEmail: true
,
messages:
email: "incorrect email"
);
【讨论】:
您可以像$.validator.messages.checkEmail = "Invalid email";
那样向自定义验证器添加特定消息【参考方案13】:
你试过了吗?
$("Textbox").rules("add", regex: "^[a-zA-Z'.\\s]1,40$", messages: regex: "The text is invalid..." )
注意:确保通过在它们前面添加另一个“\”来转义你的正则表达式的所有“\”,否则正则表达式将无法按预期工作。
【讨论】:
以上是关于jQuery validate:如何为正则表达式验证添加规则?的主要内容,如果未能解决你的问题,请参考以下文章
如何为我的 jquery validate 自定义函数制作一条中心消息?
验证控件jQuery Validation Engine简单自定义正则表达式
修改正则表达式以检查 sting 是不是在 jquery validate 中不包含电子邮件地址
如何使用 Parsley Validate 使用 jQuery Currency 格式验证输入字段? (也许是正则表达式?)