jquery.validate是jquery的一个插件，用来辅助开发者在客户端方便快捷的实现表单验证，最终达到提高用户体验的目的。
官网：
http://plugins.jquery.com/validate/
示例代码
index.cshtml
|
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
|
<
form
id
=
"formLogin"
method
=
"post"
>
<
div
>
<
label
for
=
"username"
>Username:</
label
>
<
input
type
=
"text"
id
=
"username"
name
=
"username"
/>
</
div
>
<
div
>
<
label
for
=
"password"
>password:</
label
>
<
input
type
=
"text"
id
=
"password"
name
=
"password"
/>
</
div
>
<
div
>
<
label
for
=
"password1"
>password1:</
label
>
<
input
type
=
"text"
id
=
"password1"
name
=
"password1"
/>
</
div
>
<
div
>
<
label
for
=
"sex"
>sex:</
label
>
<
select
id
=
"sex"
name
=
"sex"
>
<
option
id
=
"sexopt"
value
=
""
selected
=
"selected"
>请选择</
option
>
<
option
id
=
"sexnan"
value
=
"1"
>男</
option
>
<
option
id
=
"sexnv"
value
=
"2"
>女</
option
>
</
select
>
</
div
>
<
div
>
<
label
for
=
"favorite"
>level:</
label
>
<
input
type
=
"checkbox"
id
=
"sport"
name
=
"favorite"
value
=
"sport"
/>sport
<
input
type
=
"checkbox"
id
=
"write"
name
=
"favorite"
value
=
"write"
/>write
</
div
>
<
div
>
<
label
for
=
"level"
>level:</
label
>
<
input
type
=
"radio"
id
=
"one"
name
=
"level"
value
=
"one"
/>1
<
input
type
=
"radio"
id
=
"two"
name
=
"level"
value
=
"two"
/>2
</
div
>
<
div
>
<
input
id
=
"submit"
type
=
"button"
value
=
"submit"
/>
</
div
>
</
form
>
@section scripts{
<
script
type
=
"text/javascript"
src
=
"/content/home/index.js"
></
script
>
}
|
jquery.validate在定位html标签的时候，默认使用name属性来获取标签，所以需要开发者给需要进行验证的标签都加上name属性，并且赋值。
index.js
|
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
|
$().ready(
function
() {
$(
"#formLogin"
).validate({
rules: {
username: {
required:
true
},
password: {
required:
true
},
sex: {
required:
true
},
level: {
required:
true
},
favorite: {
required:
true
}
},
messages: {
username: {
required:
"please input username"
},
password: {
required:
"please input password"
},
sex: {
required:
"please select sex"
},
level: {
required:
"level requred"
},
favorite: {
required:
"favorite required"
}
},
errorPlacement:
function
(error, element) {
//指定错误信息位置
if
(element.is(
':radio'
) || element.is(
':checkbox'
)) {
//如果是radio或checkbox
var
eid = element.attr(
'name'
);
//获取元素的name属性
error.appendTo(element.parent());
//将错误信息添加当前元素的父结点后面
}
else
{
error.insertAfter(element);
}
}
});
});
$(
"#submit"
).click(
function
() {
$(
"#submit"
).submit();
});
|
有时候我们需要使用正则表达式对一些输入进行验证，比如说邮箱，电话号码，或者是用户名必须字母开头并且长度要在5-30位，等等之类的。
jquery.validate默认没有提供正则表达式的验证，但是它提供了一个扩展，我们可以自己添加关于正则表达式的验证规则。
|
1
2
3
4
5
6
7
8
9
10
|
$(
function
() {
// 判断用户输入的value是否满足传入的正则params的规范
jQuery.validator.addMethod(
"pattern"
,
function
(value, element, params) {
if
(!params.test(value)) {
return
false
;
}
return
true
;
});
});
|
这样我们就可以像下面这样使用我们自定义的正则表达式验证了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$().ready(
function
() {
$(
"#formLogin"
).validate({
rules: {
tel: {
required:
true
,
pattern: /^[0-9]+$/
}
},
messages: {
tel: {
required:
'tel required'
,
pattern:
"regex error"
}
}
});
});
|
怎么样，是不是很酷啊！
$("#formSupplier").validate还有一些其他的参数，跟多的参数可以查看
http://blog.csdn.net/a497785609/article/details/5758613
在这里先介绍两个比较常用的。
errorElement
错误提示的html标签
submitHandler
验证成功之后的操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$(
"#formSupplier"
).validate({
errorElement:
"span"
,
submitHandler:
function
(form) {
if
(btnType == 1) {
submitUpdateSupplier();
}
else
{
offShelf();
}
},
rules: {
txtSuUserName: {
required:
true
,
pattern: regexUsername
}
}，
messages: {
txtSuUserName: {
required:
"请填写编号！"
,
pattern:
"请注意，编号只能使用3-15位的字母组合！"
}
}
});
|
本文转自 virusswb 51CTO博客，原文链接：http://blog.51cto.com/virusswb/1369501，如需转载请自行联系原作者
