## 1. 初始化表单验证
> ```
> .validate` VS `.validator
> ```
**jquery-validation:**
```javascript
$("#myform").validate(options)
```
**nice-validator:**
```javascript
$("#myform").validator(options)
// 或者 DOM 传参，不需要初始化
```
## 2. 设置验证规则
> ```
> 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~)"
}
});
```
## 3. 设置规则消息
> ```
> 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}"
}
});
```
## 4. 自定义规则
> ```
> $.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"]
}
});
```
## 5. 设置参数默认值
> ```
> $.validator.setDefaults` VS `$.validator.config
> ```
**jquery-validation**
```javascript
$.validator.setDefaults({
debug: true
});
```
**nice-validator**
```javascript
$.validator.config({
debug: true
});
```
## 6. 提示与隐藏消息
**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");
```
## 7. 检查是否验证通过
**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
}
```
## 8. 验证完毕的回调
**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
}
});
```
## 9. 销毁表单验证
**jquery-validation**
```javascript
var validator = $("#myform").validate();
validator.resetForm();
```
**nice-validator**
```javascript
$("#myform").validator("destroy");
```
