1. 初始化表单验证
.validate VS .validator
jquery-validation : $("#myform").validate(options)
nice-validator: $("#myform").validator(options) // 或者 DOM 传参，不需要初始化
2. 设置验证规则
rules VS fields
jquery-validation 使用 rules 参数设置字段规则
$("#myform").validate({ rules: { name: "required", email: { required: true, email: true }, contact: { required: true, email: { depends: function(element) { return $("#contactform_email").is(":checked"); } } }, pay_what_you_want: { required: true min: { param: 15, depends: function(element) { return $("#bonus-material").is(":checked"); } } } } });
nice-validator 使用 fields 参数设置字段规则
$("#myform").validator({ fields: { name: "required", email: "required; email", contact: "required(#contactform_email:checked); email", pay_what_you_want: "required(#bonus-material:checked); length(15~)" } });
3. 设置规则消息
messages[name].rule VS fields[name].msg
jquery-validation 使用 messages 配置消息
$("#myform").validate({ rules: { name: { required: true, minlength: 2 } }, messages: { name: { required: "We need your email address to contact you", minlength: jQuery.validator.format("At least {0} characters required!") } } });
nice-validator 直接在 fields 里面配置消息
$("#myform").validator({ fields: { name: { rule: "required; length(2~)", msg: { required: "We need your email address to contact you", length: "At least {1} characters required!" } } } });
nice-validator 也支持 messages 参数，是针对规则的通用配置
$("#myform").validator({ fields: { name: "required; length(2~)", email: "required; email" }, messages: { required: "请填写{0}" } });
4. 自定义规则
$.validator.addMethod VS $.validator.config
jquery-validation
// 自定义全局规则 $.validator.addMethod( "integer", function( value, element ) { return this.optional( element ) || /^-?\d+$/.test( value ); }, "A positive or negative non-decimal number please" ); $.validator.addMethod( "time", function( value, element ) { return this.optional( element ) || /^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/.test( value ); }, "Please enter a valid time, between 00:00 and 23:59" ); // 自定义当前实例的规则 ??????
nice-validator
// 自定义全局规则 $.validator.config({ rules: { integer: [/^-?\d+$/, "A positive or negative non-decimal number please"] time: [/^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/, "Please enter a valid time, between 00:00 and 23:59"] } }); // 自定义当前实例的规则 $("#myform").validator({ rules: { integer: [/^-?\d+$/, "A positive or negative non-decimal number please"] time: [/^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/, "Please enter a valid time, between 00:00 and 23:59"] } });
5. 设置参数默认值
$.validator.setDefaults VS $.validator.config
jquery-validation
$.validator.setDefaults({ debug: true });
nice-validator
$.validator.config({ debug: true });
6. 提示与隐藏消息
jquery-validation
// 提示错误消息 var validator = $( "#myshowErrors" ).validate(); validator.showErrors({ "firstname": "I know that your firstname is Pete, Pete!" }); // 隐藏错误消息 ??????
nice-validator
// 批量提示错误消息 $("#myform").validator("showMsg", { "firstname": "I know that your firstname is Pete, Pete!" }); // 提示字段错误消息 $("#firstname").trigger("showmsg", ["error", "I know that your firstname is Pete, Pete!"]); // 隐藏字段错误消息 $("#firstname").trigger("hidemsg"); // 隐藏表单全部消息 $("#myform").trigger("hidemsg");
7. 检查是否验证通过
jquery-validation
// 检查表单 var validator = $( "#myform" ).validate(); if (validator.form()) { // do something } // 检查字段 var validator = $( "#myform" ).validate(); if (validator.element( "#myselect" )) { // do something }
nice-validator
// 检查表单 if ($("#myform").isValid()) { // do something } // 检查字段 if ($("#myselect").isValid()) { // do something }
8. 验证完毕的回调
jquery-validation
$("#myform").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); }, invalidHandler: function(event, validator) { // do something } });
nice-validator
$("#myform").validator({ valid: function(form) { $(form).ajaxSubmit(); }, invalid: function(form, errors) { // do something } });
9. 销毁表单验证
jquery-validation
var validator = $("#myform").validate(); validator.resetForm();
nice-validator
$("#myform").validator("destroy");