# jQuery Validation
jQuery Validation 前端表单验证框架
# 页面引用
<!-- jQuery Validation 1.14.0 -->
<script src="/static/assets/plugins/jquery-validation/js/jquery.validate.js"></script>
<script src="/static/assets/plugins/jquery-validation/js/additional-methods.js"></script>
<script src="/static/assets/plugins/jquery-validation/js/localization/messages_zh.js"></script>
1
2
3
4
2
3
4
# 使用案例
<form:input path="username" class="form-control required" placeholder="用户名" />
$(function () {
$("#inputForm").validate({
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
element.parent().parent().attr("class", "form-group has-error");
error.insertAfter(element);
}
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 默认校验规则说明
required：true 必输字段remote：check.php使用 ajax 方法调用 check.php 验证输入值email：true 必须输入正确格式的电子邮件url：true 必须输入正确格式的网址date：true 必须输入正确格式的日期dateISO：true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性number：true 必须输入合法的数字(负数，小数)digits：true 必须输入整数creditcard： 必须输入合法的信用卡号equalTo：#field，输入值必须和 #field 相同accept： 输入拥有合法后缀名的字符串（上传文件的后缀）maxlength：5，输入长度最多是5的字符串(汉字算一个字符)minlength：10，输入长度最小是10的字符串(汉字算一个字符)rangelength：[5,10]，输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)range：[5,10]，输入值必须介于 5 和 10 之间max：5，输入值不能大于 5min：10，输入值不能小于 10
# 自定义校验规则
$.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误");
1
2
3
4
5
2
3
4
5
# 封装校验器
/**
* jQuery 有效性验证
* @constructor
*/
var Validate = function () {
/**
* 初始化校验规则
*/
var handlerInit = function () {
$.validator.addMethod("mobile", function (value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误");
};
/**
* 表单验证
* @param formId
*/
var handlerValidate = function (formId) {
$("#" + formId).validate({
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
element.parent().parent().attr("class", "form-group has-error");
error.insertAfter(element);
}
});
};
return {
/**
* 初始化校验规则
*/
init: function () {
handlerInit();
},
/**
* 表单验证
* @param formId
*/
validateForm: function (formId) {
handlerValidate(formId);
}
}
}();
$(function () {
Validate.init();
});
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
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