jQuery Validate表单校验插件

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。官网地址为:https://jqueryvalidation.org/

引入依赖

引入Bootstrap(jQuery Validate并不依赖于Bootstap,这里引入Bootstrap是为了用于构建表单):

1
2
3
4
5
6
7
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- jQuery -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<!-- popper -->
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- bootstrap -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

引入jQuery Validate依赖:

1
2
3
4
<!-- jquery-validate -->
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/additional-methods.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/localization/messages_zh.js"></script>

jquery.validate.js为核心代码;additional-methods.js为扩展的校验方法,一般我们自定义的校验方法都放到这个文件里;messages_zh.js为中文汉化包。

默认校验规则

jquery.validate.js为我们提供了一系列的默认校验规则:

序号规则描述
1required:true必须输入的字段。
2remote:”check.php”使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6dateISO:true必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7number:true必须输入合法的数字(负数,小数)。
8digits:true必须输入整数。
9creditcard:必须输入合法的信用卡号。
10equalTo:”#field”输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串(上传文件的后缀)。
12maxlength:5输入长度最多是 5 的字符串(汉字算一个字符)。当为checkbox时,指选中个数。
13minlength:10输入长度最小是 10 的字符串(汉字算一个字符)。当为checkbox时,指选中个数。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。当为checkbox时,指选中个数。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min:10输入值不能小于 10。

默认的提示(messages_zh.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});

自定义校验

除了使用自带的校验方法外,我们也可以添加自己的校验方法,比如添加手机号码格式的校验方法:

1
2
3
4
jQuery.validator.addMethod("checkPhone", function(value, element, params) {
var checkPhone = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
return this.optional(element) || (checkPhone.test(value));
}, "请输入正确的手机号");

value值当前校验的值,element为校验的元素,params为校验参数。

自定义的校验方法一般都添加到additional-methods.js。

错误信息提示

当校验不通过时,默认错误信息会插入到校验元素的后面,但当校验元素是radio或者checkbox的时候,错误信息的位置需要进行调整:

QQ截图20180315163346.png

调整方法:

1
2
3
4
5
6
7
8
errorPlacement: function(error, element) { //指定错误信息位置
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //获取元素的name属性
error.appendTo(element.parent().parent()); //将错误信息添加当前元素的父元素的父元素后面(根据实际html结构进行调整)
} else {
error.insertAfter(element);
}
}

调整后: QQ截图20180315163539.png

后端校验

remote选项用于后端校验,比如校验用户名的唯一性等:

1
2
3
4
5
6
7
8
9
10
remote: {
url: "user/checkUserName",
type: "get",
dataType: "json",
data: {
username: function() {
return $("input[name='username']").val();
}
}
}

后端返回boolean类型即可。

实例

编写个form表单:

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
78
79
80
<form class="form">
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" name="userName" placeholder="用户名">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" name="password" placeholder="密码">
</div>
<div class="form-group">
<label>确认密码</label>
<input type="password" class="form-control" name="confirm_password" placeholder="请再次输入密码">
</div>
<div class="form-group">
<label>手机号</label>
<input type="text" class="form-control" name="phone" placeholder="手机号">
</div>
<div class="form-group">
<label>邮箱</label>
<input type="text" class="form-control" name="email" placeholder="邮箱">
</div>
<div class="form-group">
<label>地址</label>
<select class="form-control" name="address">
<option value="">- 请选择 -</option>
<option value="1">福州</option>
<option value="2">厦门</option>
<option value="3">龙岩</option>
</select>
</div>
<div class="form-group">
<label>爱好</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobby" value="1">
<label class="form-check-label">游泳</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobby" value="2">
<label class="form-check-label">唱歌</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobby" value="3">
<label class="form-check-label">睡觉</label>
</div>
</div>
<div class="form-group">
<label>性别</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sex" value="1">
<label class="form-check-label"></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sex" value="2">
<label class="form-check-label"></label>
</div>
</div>
<div class="form-group">
<label>上传图片</label>
<input type="file" class="form-control-file" name="file">
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" name="subscribe">
<label class="form-check-label">订阅</label>
</div>
</div>
<div class="form-group">
<label>订阅方式</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="stype" value="1">
<label class="form-check-label">RSS</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="stype" value="2">
<label class="form-check-label">邮箱订阅</label>
</div>
</div>
</form>
<button id="submit" class="btn btn-primary">Submit</button>
<button id="reset" class="btn btn-danger">Reset</button>

绑定校验规则等:

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
jQuery.validator.addMethod("checkPhone", function(value, element, params) {
var checkPhone = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
return this.optional(element) || (checkPhone.test(value));
}, "请输入正确的手机号");

$(function() {
validateRule();
$("#submit").on('click', function() {
var validator = $(".form").validate();
var flag = validator.form();
if (flag) {
alert("true");
} else {
alert("false");
}
});
$("#reset").on('click', function() {
var validator = $(".form").validate();
validator.resetForm();
});
});

function validateRule() {
$(".form").validate({
rules: {
userName: {
required: true,
minlength: 3,
maxlength: 10
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "[name='password']"
},
address: {
required: true
},
phone: {
checkPhone: true
},
email: {
required: true,
email: true
},
hobby: {
required: true,
minlength: 2
},
sex: {
required: true
},
file: {
required: true,
accept: "image/jpg,image/jpeg,image/png,image/gif"
},
stype: {
required: "[name='subscribe']:checked"
}
},
messages: {
userName: {
required: "请输入用户名",
minlength: "用户名长度不能少于{0}个字符",
maxlength: "用户名长度不能超过{0}个字符"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于{0}个字母"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于{0}个字母",
equalTo: "两次密码输入不一致"
},
address: {
required: "请选择地址"
},
email: {
required: "请输入邮箱",
email: "邮箱格式不正确"
},
hobby: {
required: "请选择爱好",
minlength: "至少选择{0}项爱好"
},
sex: {
required: "请选择性别"
},
file: {
required: "请上传附件",
accept: "只支持jpg,jpeg,png或gif后缀的图片"
},
stype: {
required: "请选择订阅方式"
}
},
errorPlacement: function(error, element) {
if (element.is(':radio') || element.is(':checkbox')) {
var eid = element.attr('name');
error.appendTo(element.parent().parent());
} else {
error.insertAfter(element);
}
}
});
}

这里提下关于附件的格式问题,其限定的不是文件格式后缀,而是文件的MIME类型,具体可参考:BootstrapValidator指南中列举的MIME类型。

演示效果如下:

See the Pen jquery-validation by wuyouzhuguli (@mrbird) on CodePen.

源码地址:https://drive.google.com/open?id=1lyUVNyX5VkxN3GqQz0_y_oBX3twMxPAh

其他使用事项可参考:

  1. http://www.runoob.com/jquery/jquery-plugin-validate.html

  2. https://jqueryvalidation.org/documentation/

请作者喝瓶肥宅水~

TOP