jquery.validate表单验证插件

2026-04-28 15:26:50 199
分类:js插件

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

使用方法

  1. 可以自定义样式并引入,引入jquery、jquery.validate.js,如果需要扩展引入jquery.validate-expand.js

  2. 使用方法示例

$("#form").validate({
    debug: true,        //调试模式(表单不提交,默认为false)  
    ignore: '',         //提交所有元素(默认不提交隐藏元素)  
    errorElement: "em", //自定义错误元素  
    rules: {            //验证规则  
        account: {
            required: true,
            rangelength: [4, 20],
        },
        password: {
            required: true,
            rangelength: [6, 20]
        },
        confirm_password: {
            required: true,
            equalTo: "#password"
        },
        mobile: {
            required: true,
            isMobile: true,
            remote: {
                type: 'POST',
                url: '',
                dataType: "html",
                data: {
                    mobile: function () {
                        return $("#mobile").val()
                    },
                },
                dataFilter: function (data, type) {
                    if (data == 0) return true;
                    else return "手机号码已注册";
                }
            }
        },
        code: {
            required: true
        },
        agreement: {
            required: true
        },
    },
    messages: {        //错误提示  
        account: {
            required: "请输入昵称",
            rangelength: "长度{0}~{1}之间"
        },
        password: {
            required: "请输入密码",
            rangelength: "长度在{0}~{1}个字符之间"
        },
        confirm_password: {
            required: "请输入确认密码",
            equalTo: "两次输入密码不一致"
        },
        mobile: {
            required: "请输入手机号码"
        },
        code: {
            required: "请输入手机校验码"
        },
        agreement: {
            required: "请阅读并同意用户协议"
        },
    },
    success: function (label) {
        label.addClass("success");
    },
    errorPlacement: function (error, element) {
        var $ele = $(element);
        if ($ele.attr('name') == 'code') {
            $ele.parent().find('#get_code').after(error);
        } else if (($ele.attr('name') == 'agreement')) {
            $ele.parent().find('b').after(error);
        } else {
            $ele.after(error);
        }
    },
    showErrors: function (errorMap, errorList) {
        this.defaultShowErrors();
        errorList.forEach(function (ele) {
            $(ele.element).parent().find('.error').removeClass('success');
        });
    },
    submitHandler: function () {
        //验证成功,可以提交了  
    }
});

下载地址:

jquery-validation.rar