Nice Jquery Validator [Migrated from jQuery Validation]

1. Initialize form validation

.validate VS .validator

jquery-validation : $("#myform").validate(options)

nice-validator:  $("#myform").validator(options) // 或者 DOM 传参，不需要初始化

 

2. Set validation rules

rules VS fields

jquery-validation  uses the rules parameter to set field 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  uses the fields parameter to set field rules

$("#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. Set the rule message

messages[name].rule VS fields[name].msg

jquery-validation  uses messages to configure 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  configures messages directly in 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  also supports the messages parameter, which is a general configuration for rules

$("#myform").validator({ fields: { name: "required; length(2~)", email: "required; email" }, messages: { required: "请填写{0}" } });

4. Custom Rules

$.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. Set parameter default value

$.validator.setDefaults VS $.validator.config

jquery-validation

$.validator.setDefaults({ debug: true });

nice-validator

$.validator.config({ debug: true });

6. Tips and hidden messages

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. Check whether the verification is passed

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. Callback after verification

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. Destroy form validation

jquery-validation

var validator = $("#myform").validate(); validator.resetForm();


nice-validator

$("#myform").validator("destroy");