我正在使用jQuery验证插件，非常好用！我想将现有的ASP.NET解决方案迁移到使用jQuery而不是ASP.NET验证程序。我需要一个正则表达式验证器的替代品。我希望能够像这样做：
$("Textbox").rules("add", { regularExpression: "^[a-zA-Z'.\s]{1,40}$" })
我该如何添加自定义规则以实现这个目标？
jQuery验证：如何添加正则表达式验证规则？
254
- PeterTheNiceGuy
4
1请确认您正在检查输入的服务器端，而不仅仅依赖于客户端验证，因为客户端验证显然可以被关闭。 - S Philp
在服务器上进行验证是必须的。 - PeterFromCologne
136天哪，它没有正则表达式验证？！ - Andrei Rînea
5我的意思是，谁会想要正则表达式来进行验证呢... ;) - jamiebarrow
13个回答
355
感谢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}$" })
这是一个包含 jQuery 验证插件的CDN链接，其中jquery.validate.min.js提供了验证表单的核心逻辑，additional-methods.min.js为此插件提供了额外的验证方法。
- PeterTheNiceGuy
14
4应将$("Textbox")更改为$("#Textbox")。 - Ryan Shripat
3我会将RegExp定义为字面量并在方法外部进行定义，而不是通过字符串调用。 - Tracker1
3这非常有用，应该包含在jQuery中 :( - Grahame A
3可以像这样将其添加到验证器中：...规则：{文本框输入名称属性：{
必填：true，
正则表达式：“^ [a-zA-Z'.\ s] {1,50} $”
} }，... - Hans Kerkhof
3您可以像这样输入自定义消息：$('#element').rules('add', { regex: /[abc]/, messages: { regex: "自定义消息" } }); - naspinski
显示剩余9条评论
84
您可以使用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.');
- redsquare
1
7不要真正回答这个问题。如果你想要一个通用的正则表达式规则呢？
对于这个答案，您将不得不为每个不同的正则表达式添加方法。 - AndreasN
45
我在制作jQuery正则表达式验证器时遇到了一些困难，但最终搞定了... 这里有一个完整的可工作示例。 它使用了“Validation”插件，该插件可以在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>
- bshack
27
没有必要将正则表达式定义为字符串。
$.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 },
这样做更好，不是吗？
- Sam
3
这需要哪个 JS？ - Bhavik Ambani
实际上，刚刚发现了一个问题。如果使用 g 标志，则会得到不一致的结果。g 标志显然会创建它自己的索引（请参见：https://dev59.com/_3VC5IYBdhLWcg3wsTbv）。因此，您需要在函数内重新定义正则表达式，以便每次调用时都会重新创建它。 - rob_james
1另外需要补充的是：仍然要像上面那样将其定义为正则表达式（否则，使用标志进行字符串 > 正则表达式转换时会出现问题），但是此外在该函数中仍然需要
var re = new RegExp(regexp);。 - rob_james24
稍微扩展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/
});
不过实现这些可能会有点过头。
- Markus Jarderot
2
我想在JQgrid的添加表单中进行正则表达式验证。我该怎么做？ - Bhavik Ambani
19
如在addMethod文档中所述：
请注意：虽然很容易添加一个正则表达式方法来检查参数与值的匹配，但将这些正则表达式封装在自己的方法中要更加清晰。如果您需要大量略有不同的表达式，请尝试提取一个共同的参数。使用本库的正则表达式：http://regexlib.com/DisplayPatterns.aspx
是的，您必须为每个正则表达式添加一个方法。开销很小，它允许您为正则表达式命名（不要低估），设置默认消息（方便）并在各个地方重用它，而不会反复复制该正则表达式。
- Jörn Zaefferer
1
非常感谢您的回答！谢谢。我会再考虑一下。在我们的情况下，正则表达式验证似乎是最好的选择。然而，我理解您使用“命名”验证的观点... - PeterFromCologne
18
我这样做使它工作了：
$.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'
}
}
});
});
确保正则表达式位于/之间 :-)
- Kris Nobels
15
您可以使用在 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>- Wiktor Stribiżew
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
3
我们主要使用jquery验证插件的标记符号，但是当正则表达式中存在标志（例如），我们发现此前的样例并不适用于我们。
因此，我们使用以下代码片段：
当然，现在可以将此代码与上述之一相结合，以便允许将RegExp对象传递到插件中，但由于我们不需要它，所以我们将此练习留给读者；-）。 PS：还有一个捆绑的插件，https://github.com/jzaefferer/jquery-validation/blob/master/src/additional/pattern.js。
<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。
- staabm
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接