1. jQuery Validation

jQuery Validation 前端表单验证框架

2. 页面引用

1
2
3
4
<!-- 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>

3. 使用案例

1
2
3
4
5
6
7
8
9
10
11
12
13
<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);
        }
    });
});

4. 默认校验规则说明

  • 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，输入值不能大于 5
  • min：10，输入值不能小于 10

5. 自定义校验规则

1
2
3
4
5
$.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));
}, "手机号码格式错误");

6. 封装校验器

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
/**
 * 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();
});