## 一、初始化表單驗證
> `.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");
~~~
