## 一、初始化表单验证
> `.validate`VS`.validator`
**jquery-validation:**
~~~javascript
$("#myform").validate(options)
~~~
**nice-validator:**
~~~javascript
$("#myform").validator(options)
// 或者 DOM 传参，不需要初始化
~~~
## 二、设置验证规则
> `rules`VS`fields`
**jquery-validation**使用 rules 参数设置字段规则
~~~javascript
$("#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 参数设置字段规则
~~~javascript
$("#myform").validator({
fields: {
name: "required",
email: "required; email",
contact: "required(#contactform_email:checked); email",
pay_what_you_want: "required(#bonus-material:checked); length(15~)"
}
});
~~~
## 三、设置规则消息
> `messages[name].rule`VS`fields[name].msg`
**jquery-validation**使用 messages 配置消息
~~~javascript
$("#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 里面配置消息
~~~javascript
$("#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 参数，是针对规则的通用配置
~~~javascript
$("#myform").validator({
fields: {
name: "required; length(2~)",
email: "required; email"
},
messages: {
required: "请填写{0}"
}
});
~~~
## 四、自定义规则
> `$.validator.addMethod`VS`$.validator.config`
**jquery-validation**
~~~javascript
// 自定义全局规则
$.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**
~~~javascript
// 自定义全局规则
$.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"]
}
});
~~~
## 五、设置参数默认值
> `$.validator.setDefaults`VS`$.validator.config`
**jquery-validation**
~~~javascript
$.validator.setDefaults({
debug: true
});
~~~
**nice-validator**
~~~javascript
$.validator.config({
debug: true
});
~~~
## 六、提示与隐藏消息
**jquery-validation**
~~~javascript
// 提示错误消息
var validator = $( "#myshowErrors" ).validate();
validator.showErrors({
"firstname": "I know that your firstname is Pete, Pete!"
});
// 隐藏错误消息 ??????
~~~
**nice-validator**
~~~javascript
// 批量提示错误消息
$("#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");
~~~
## 七、检查是否验证通过
**jquery-validation**
~~~javascript
// 检查表单
var validator = $( "#myform" ).validate();
if (validator.form()) {
// do something
}
// 检查字段
var validator = $( "#myform" ).validate();
if (validator.element( "#myselect" )) {
// do something
}
~~~
**nice-validator**
~~~javascript
// 检查表单
if ($("#myform").isValid()) {
// do something
}
// 检查字段
if ($("#myselect").isValid()) {
// do something
}
~~~
## 八、验证完毕的回调
**jquery-validation**
~~~javascript
$("#myform").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
},
invalidHandler: function(event, validator) {
// do something
}
});
~~~
**nice-validator**
~~~javascript
$("#myform").validator({
valid: function(form) {
$(form).ajaxSubmit();
},
invalid: function(form, errors) {
// do something
}
});
~~~
## 九、销毁表单验证
**jquery-validation**
~~~javascript
var validator = $("#myform").validate();
validator.resetForm();
~~~
**nice-validator**
~~~javascript
$("#myform").validator("destroy");
~~~
