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

Nice Jquery Validator 【从 jQuery Validation 迁移】

原文地址：https://www.cnblogs.com/feixiablog/p/8990872.html