jQuery Validate 使用记录

validate验证效果.png

1.html表单中用<form>标签将要验证的元素包括起来，在元素上加上name属性

<form id="account_form" action="" class="form-horizontal account-form">
    <div class="form-group col-lg-8">
        <label for="add-user-name" class="col-xs-2 control-label">姓名</label>
        <div class="col-xs-6">
            <input type="text" class="form-control is-valid" id="add-user-name" name="userName" placeholder="请输入用户名称" required>
        </div>
    </div>

    <div class="form-group col-lg-8">
        <label for="add-user-email" class="col-xs-2 control-label">邮箱</label>
        <div class="col-xs-6">
            <input type="email" class="form-control" id="add-user-email" name="userEmail" placeholder="请输入邮箱" required>
        </div>
    </div>

    <div class="form-group col-lg-8">
        <label for="add-user-account" class="col-xs-2 control-label">账号</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" id="add-user-account" name="userAccount" placeholder="请输入账号" required>
        </div>
    </div>

    <div class="form-group col-lg-8">
        <label for="add-user-password" class="col-xs-2 control-label">密码</label>
        <div class="col-xs-6">
            <input type="password" class="form-control" id="add-user-password" name="userPassword" placeholder="请输入密码" required>
        </div>
    </div>

    <div class="form-group col-lg-8">
        <label for="add-user-comfirm-password" class="col-xs-2 control-label">确认密码</label>
        <div class="col-xs-6">
            <input type="password" class="form-control" id="add-user-comfirm-password" name="userPasswordComfirm" placeholder="请再次输入密码">
        </div>
    </div>
</form>

2.js初始化和设置验证规则

var validate = $('.account-form').validate({
    onfocusout: function (element) {
        $(element).valid();
    },
    errorClass: 'help-block',
    rules: {
        userName: "required",
        userAccount: {
            required: true,
            remote: {
                url: "../account/exist",
                type: "post",
                dataType: "json",
                data: {
                    account: function () {
                        return $("#add-user-account").val();
                    }
                }
            }
        },
        userPassword: "required",
        userEmail: {
            required: true,
            email: true
        },
        userPasswordComfirm: {
            required: true,
            equalTo: "#add-user-password"
        }
    },
    messages: {
        userName: "请输入用户名称",
        userAccount: {
            required: "请输入账户",
            remote: "账号已经存在"
        },
        userPassword: "请输入密码",
        userEmail: {
            required: "请输入Email地址",
            email: "请输入正确的email地址"
        },
        userPasswordComfirm: {
            required: "请输入确认密码",
            equalTo: "确认密码与密码不一致"
        }
    }
});

3.常用参数/方法

1.清空form表单中所有元素 
validate.resetForm();
2.验证失败聚集到失败的元素上
validate.focusInvalid();

4.自定义校验方法

// 表单校验
    function formCheck() {
        validate = $('#questionnaire-form').validate({
            // 失焦后校验
            onfocusout: function (element) {
                $(element).valid();
            },
            // 去掉输入值左右的空格
            onkeyup: function (element) {
                var value = this.elementValue(element).trim();
                $(element).val(value);
            },
            // 指定验证失败提示信息的样式类
            errorClass: 'help-block',
            // 验证字段及规则
            rules: {
                'create-time': 'required',
                'questionnaire-name': {
                    required: true,
                    // 使用自定义校验方法
                    checkUnique: ['../questionnaire/name', 'post']
                }
            },
            // 验证字段及验证失败对应的提示信息
            messages: {
                'create-time': "请选择创建时间",
                'questionnaire-name': {
                    required: "请输入问卷名",
                    checkUnique: "问卷名已经存在, 请重新输入"
                }
            }
        });

        // 自定义 请求服务器判重 方法(params是一个参数数组)
        jQuery.validator.addMethod("checkUnique", function(value, element, params) {
            var deferred = $.Deferred();
            if (params) {
                if (value === tempQuestionnaireName) {
                    return true;
                }

                $.ajax({
                    url: params[0],
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    data: {
                        name: value
                    },
                    success: function(data) {
                        if (data) {
                            deferred.resolve();
                        } else {
                            deferred.reject();
                        }
                    },
                    error: function () {
                        console.log("查重时发生错误！");
                    }
                });
            }
            return deferred.state() === "resolved";
        });
    }