正文
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
// 自定义全局规则nice-validator
$.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" ); // 自定义当前实例的规则 ??????
// 自定义全局规则
$.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
// 检查表单nice-validator
var validator = $( "#myform" ).validate();
if (validator.form()) {
// do something
}
// 检查字段
var validator = $( "#myform" ).validate();
if (validator.element( "#myselect" )) {
// do something
}
// 检查表单
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");
