jQuery Validate表单校验插件

|   Visit count

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/

请作者喝瓶肥宅水🥤
0