Nice Jquery Validator 【从 jQuery Validation 迁移】

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");