Validate 相关参数及自定义验证规则

一、官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation

二、默认校验规则

required:true               必输字段
remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
email:true                  必须输入正确格式的电子邮件
url:true                    必须输入正确格式的网址
date:true                   必须输入正确格式的日期，日期校验ie6出错，慎用
dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
number:true                 必须输入合法的数字(负数，小数)
digits:true                 必须输入整数
creditcard:true             必须输入合法的信用卡号
equalTo:"#password"         输入值必须和#password相同
accept:                     输入拥有合法后缀名的字符串（上传文件的后缀）
maxlength:5                 输入长度最多是5的字符串(汉字算一个字符)
minlength:10                输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10]          输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]                输入值必须介于 5 和 10 之间
max:5                       输入值不能大于5
min:10                      输入值不能小于10

三、默认的提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
}

四、实例

// 提交验证
$("#form").validate({
    rules: {
        name: {required: true},
        card: {required: true, isCard: true}
    },
    messages: {
        name: "请填写真实姓名",
        card: {
            required: "请填写身份证号",
            isCard: "请填写正确身份证号码"
        }
    },
    // debug: true, //调试模式取消submit的默认提交功能
    //errorClass: "label.error", //默认为错误的样式类为：error
    focusInvalid: true, //当为false时，验证无效时，没有焦点响应
    onkeyup: false,
    submitHandler: function (form) {   //表单提交句柄,为一回调函数，带一个参数：form
        form.submit();   //提交表单
    },
    errorPlacement: function(error, element) {
        // console.log(error, element)
    },
    success: function(label) {
        // console.log(label)
    },
    errorPlacement: function(error, element) {
        error.appendTo(element.parent().parent().parent());
    }
});

五、自定义验证规则

调用

// 自定义验证规则
$("#form").validate({
    rules: {
        name: {required: true},
        card: {
        	required: true, 
        	isCard: true
        }
    },
    messages: {
        name: "请填写真实姓名",
        card: {
            required: "请填写身份证号",
            isCard: "请填写正确身份证号码"
        }
    }
});

第一种：

• name：是添加的方法的名字
• method：是一个函数，接收三个参数 (value,element,param) （value 是元素的值，element 是元素本身，param 是参数）
• message：是错误提示

$.validator.addMethod("isCard", function(value, element, param) {
    return isCard(value);
}, "请正确输入身份证号码")

第二种：value是当前元素的值，element是当前元素，param是传入的参数。

$.validator.methods.isCard = function(value, element, param) {
    return isCard(value);
};