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