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

jQuery validate: How to add a rule for regular expression validation?

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

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

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

相关讨论

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

1
2
3
4
5
6
7
8

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

现在您需要做的就是验证任何正则表达式是这样的：

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

此外，看起来有一个名为additional-methods.js的文件包含方法"pattern"，当使用不带引号的方法创建时，它可以是RegExp。

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

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

相关讨论

你可以使用addMethod()

例如

1
2
3

$.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/

相关讨论

我在制作一个jQuery正则表达式验证器时把所有部分放在一起有些麻烦，但我让它工作......这是一个完整的工作示例。它使用'验证'插件，可以在jQuery Validation Plugin中找到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<!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 src="http://YOURJQUERYPATH/js/jquery.validate.js" type="text/javascript">
<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",
},
});
});

</head>
<body>

<form id="LOGIN" name="LOGIN" method="post" action="/index/secure/authentication?action=login">
Log In

<label for="EMAIL">Email Address</label>
<input id="EMAIL" name="EMAIL" type="text" value="" tabindex="1" />

<label for="PASSWORD">Password</label>
<input id="PASSWORD" name="PASSWORD" type="password" value="" tabindex="2" />

<input id="SUBMIT" name="SUBMIT" type="submit" value="Submit" tabindex="3" />

</form>

</body>
</html>

相关讨论

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

1
2
3
4
5
6
7
8

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

和

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

这样更好，不是吗？

相关讨论

延伸PeterTheNiceGuy的答案：

1
2
3
4
5
6
7
8
9
10
11

$.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."
);

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

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

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

我的其他一些想法是让你使用正则表达式的数组，以及另一个否定正则表达式的规则：

1
2
3
4
5
6
7
8
9

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

但实施这些可能会太多。

相关讨论

正如addMethod文档中提到的：

请注意：尽管添加一个正则表达式来检查它的参数值是非常好的诱惑，但将这些正则表达式封装在自己的方法中会更加清晰。如果您需要许多略有不同的表达式，请尝试提取一个通用参数。正则表达式库：http：//regexlib.com/DisplayPatterns.aspx

所以是的，你必须为每个正则表达式添加一个方法。开销很小，同时它允许你给正则表达式一个名字(不可低估)，默认消息(方便)以及在不同地方重用它的能力，而不会反复重复正则表达式本身。

相关讨论

我让它像这样工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$.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'
}
}
});
});

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12

$("#frm").validate({
rules: {
Textbox: {
pattern: /^[a-zA-Z'.\s]{1,40}$/
},
},
messages: {
Textbox: {
pattern: 'The Textbox string format is invalid'
}
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13

这是工作代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

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, [email protected]'
},

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;
}
});
}

相关讨论

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

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

因此我们使用以下代码段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

1
2
3
4

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

希望能帮助到你