nice Validator參考

時間  2019-11-20
標籤 nice validator 參考 简体版
原文   原文鏈接

快速上手

例1. DOM傳參

1. 要驗證一個表單，只須要給字段綁定規則「 data-rule」就能夠了
2. 字段能夠有多條規則，規則之間用分號（;）分隔
3. js初始化不是必要的，只要是字段而且帶有「data-rule」屬性，即便是新插入的一段DOM也能夠立馬驗證
4. 其中：required是內置規則（核心自帶），username、password是配置文件中設置的全局規則（配置文件）
Preview

HTML
< form  id= "demo_11"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< input  name= "user[name]"  data-rule= "required;username"  placeholder= "用戶名"></ p>
< p>< input  name= "user[pwd]"  data-rule= "required;password"  placeholder= "密碼"></ p>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>
 

例2. js傳參（這和上面的DOM傳參等價）

1. 若是你願意的話，也能夠「DOM傳參」 和 「js調用」混搭，js傳遞的規則優先級最高
Preview

提交
HTML
< form  id= "demo_12"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< input  name= "user[name]"  placeholder= "用戶名"></ p>
< p>< input  name= "user[pwd]"  placeholder= "密碼"></ p>
</ fieldset>
<!--button type="submit">提交</button-->
< a  href= "javascript:"  class= "submit-btn">提交</ a>
</ form>

Javascript
$( '#demo_12').validator({
fields: {
'user[name]':  'required; username;'
, 'user[pwd]':  'required; password;'
}
})
// 使用連接代替submit按鈕（注意：這種狀況下輸入框裏面的回車鍵不能觸發submit事件）
.on( "click",  "a.submit-btn",  function(e){
$(e.delegateTarget).trigger( "submit");
});

 

例3. 設置顯示替換名

1. 在規則字符串的最前面加上該字段的名字，而且跟上一個冒號(:)，例以下面的「用戶名:」, 參見 公共定義
2. 若是是js調用也是同樣的
3. 下面的例子同時在form上綁定了參數
Preview

HTML
< form  id= "demo_13"  action= "results.php"  method= "post"  autocomplete= "off"
data-validator-option= "{theme:'yellow_right_effect',stopOnError:true}">
< fieldset>
< p>< input  name= "username"  data-rule= "用戶名:required;username"  placeholder= "用戶名"></ p>
< p>< input  name= "password"  data-rule= "密碼:required;password"  placeholder= "密碼"></ p>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

數值範圍

規則：range[limits];
limits（範圍）表示方式： ~100 (小於100)，0~100 (0到100)，100~ (大於100)

例1. 輸入數值必須在指定範圍

Preview
  %
HTML
< form  id= "demo_41"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< label  class= "form-label">折扣：</ label>
< input  name= "discount"  data-rule= "required; integer; range[1~100]">%
< span  class= "msg-box"  for= "discount"></ span>
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>

 

例2. 輸入數值必須小於某個範圍

Preview
 
HTML
< form  id= "demo_42"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< label  class= "form-label">分數：</ label>
< input  name= "score"  data-rule= "required; integer[+0]; range[~100]">
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>

 

例3. 輸入數值必須大於某個範圍

Preview
 
HTML
< form  id= "demo_43"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< label  class= "form-label">分數：</ label>
< input  name= "score"  data-rule= "required; integer; range[0~]">
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>
 

checkbox 和 radio的驗證

例1. radio的必選

1. 對於checkbox和radio，要「必填」的話，不能使用「 required」，而是使用「 checked」
2. 你只須要在第一個checkbox或者radio上面綁定規則就能夠了
3. 消息會自動生成，而且顯示在最後面，你無需關注消息怎麼顯示
Preview
           不能爲空
HTML
< form  id= "demo_51"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< label  class= "form-label">性別：</ label>
< label>< input  type= "radio"  name= "gender"  value= "1"  data-rule= "checked">男</ label>&nbsp;
< label>< input  type= "radio"  name= "gender"  value= "2">女</ label>&nbsp;
< label>< input  type= "radio"  name= "gender"  value= "0">保密</ label>&nbsp;
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>

 

例2. 不能爲空，至少選擇一項

在第一個checkbox上綁定規則： checked
Preview
                 
HTML
< form  id= "demo_52"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< label  class= "form-label">興趣：</ label>
< label>< input  type= "checkbox"  name= "interest[]"  value= "0"  data-rule= "checked">看書</ label> &nbsp;
< label>< input  type= "checkbox"  name= "interest[]"  value= "1">上網</ label> &nbsp;
< label>< input  type= "checkbox"  name= "interest[]"  value= "2">睡覺</ label> &nbsp;
< label>< input  type= "checkbox"  name= "interest[]"  value= "3">運動</ label> &nbsp;
< label>< input  type= "checkbox"  name= "interest[]"  value= "4">發呆</ label>
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>

 

例3. 控制選中項目數

1.  checked[2~]表示選擇的項目要在2項以上
2. 不要對 :radio使用參數，由於自己就是單選，直接 checked就能夠了
Preview
                 
HTML
< form  id= "demo_53"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< label  class= "form-label">興趣：</ label>
< label>< input  type= "checkbox"  name= "interest[]"  value= "0"  data-rule= "checked[2~]">看書</ label> &nbsp;
< label>< input  type= "checkbox"  name= "interest[]"  value= "1">上網</ label> &nbsp;
< label>< input  type= "checkbox"  name= "interest[]"  value= "2">睡覺</ label> &nbsp;
< label>< input  type= "checkbox"  name= "interest[]"  value= "3">運動</ label> &nbsp;
< label>< input  type= "checkbox"  name= "interest[]"  value= "4">發呆</ label>
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>
 
 
 

例4. Ajax提交表單

1. 能夠經過 valid參數傳入回調，參見 配置
2. 也能夠直接接收 valid.form事件（下面例子採用接收事件的方式），參見 事件
Preview

HTML
< div  id= "result_14"  class= "tip-ok"  style= "display:none">提交成功</ div>
< form  id= "demo_14"  autocomplete= "off"
data-validator-option= "{theme:'simple_right'}"
>
< fieldset>
< p>< input  name= "username"  data-rule= "用戶名:required;username"  placeholder= "用戶名"></ p>
< p>< input  name= "password"  data-rule= "密碼:required;password"  placeholder= "密碼"></ p>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
//接收表單驗證經過的事件
$( '#demo_14').bind( 'valid.form',  function(){
$.ajax({
url:  'results.php',
type:  'POST',
data: $( this).serialize(),
success:  function(d){
$( '#result_14').fadeIn( 300).delay( 2000).fadeOut( 500);
}
});
});

 

例5. 規則的邏輯或、邏輯非

一、使用豎線（|）分隔的多個規則，只要其中一個驗證經過，就算經過
二、連續的規則或，只須要給最後一條規則設置錯誤消息
三、在規則名前面加上邏輯非（!），便可反轉規則的驗證效果
四、規則非，不能使用本來規則的消息，只能從新定義
Preview

用戶名能夠是手機號或者郵箱javascript

密碼至少6位php

HTML
< form  id= "demo_15"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< input  name= "user[name]"  placeholder= "手機號或郵箱"
data-rule= "用戶名: required; mobile|email;"
data-msg-email= "{0}能夠是手機號或者郵箱"
></ p>
< p>< input  name= "user[pwd]"  placeholder= "密碼"
data-rule= "密碼: required; !digits; length[6~]"
data-msg-digits= "{0}不能使用純數字"
data-msg-length= "{0}至少6位"
></ p>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

 
 

兩個字段匹配

例1. 兩個字段的值必須相同

規則：match[name];
Preview

 css

 html

HTML
< form  id= "demo_21"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< label  class= "form-label">密碼：</ label>
< input  name= "user[pwd]"  data-rule= "密碼: required;password;">
</ p>
< p>< label  class= "form-label">確認密碼：</ label>
< input  name= "againPwd"  data-rule= "確認密碼: required;match(user[pwd]);">
</ p>
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>

 

例2. 兩個字段比較大小

規則：match[limits, name];
limits可用值：eq (相同), lt (小於)，gt (大於)，lte (小於等於)，gte (大於等於)
這種模式下，兩個字段的值都會轉換爲數字進行比較
Preview

 java

 jquery

 

HTML
< form  id= "demo_22"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< label  class= "form-label">總量：</ label>
< input  name= "totle"  data-rule= "總量:required;integer[+0]">
</ p>
< p>< label  class= "form-label">餘量：</ label>
< input  name= "last"  data-rule= "餘量:required;match[lte, totle]">
< p>
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>

 

例3. 結束日期必須大於開始日期

規則：match[limits, name, date];
limits可用值：eq (相同), lt (小於)，gt (大於)，lte (小於等於)，gte (大於等於)
第三個參數 date或 time表明要比較的類型
Preview

 git

 ajax

 

HTML
< form  id= "demo_23"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< label  class= "form-label">開始日期：</ label>
< input  name= "totle"  data-rule= "開始日期: required; date;">
</ p>
< p>< label  class= "form-label">結束日期：</ label>
< input  name= "last"  data-rule= "結束日期: required; date; match[gt, totle, date]">
< p>
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>

 

字符串長度

例1. 限制字符長度範圍

規則：length[limits];
limits（範圍）表示方式： ~100 (小於100)，0~100 (0到100)，100~ (大於100)
Preview
 
HTML
< form  id= "demo_31"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< label  class= "form-label">描述：</ label>
< textarea  name= "description"  data-rule= "描述:required;length[4~]"></ textarea>
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>
 

例2. 限制字符長度範圍，計算真實長度（全角字符計算兩個字符）

規則：length[limits, true];
limits（範圍）表示方式同上
Preview
 
HTML
< form  id= "demo_32"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< label  class= "form-label">描述：</ label>
< textarea  name= "description"  data-rule= "描述:required;length[8~100, true]"></ textarea>
</ fieldset>
< div  class= "form-submit">
< button  type= "submit">提交</ button>
</ div>
</ form>

 

 

遠程驗證

例1. 服務器端驗證並返回結果

a. 使用規則：remote([get:]url [, name1, [name2]...]);正則表達式

b. url前面的get:是可選的，加上此參數，將改變ajax方式爲GETjson

c. 從第二個參數起，可選傳入字段的name，用於附帶額外請求參數

d. 智能適配服務器返回的3種數據格式，對於json格式（2和3）只須要包含所需數據就適配:

1. '' => 成功， '錯誤消息' => 失敗
2. {"ok":""} => 成功，{"ok":"名字很棒!"} => 成功， {"error":"錯誤消息"} => 失敗
3. {"data":{"ok":""}} => 成功，{"data":{"ok":"名字很棒!"}} => 成功， {"data":{"error":"錯誤消息"}} => 失敗

Preview
HTML
< form  id= "demo_61"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< input  name= "username"  data-rule= "required;username;remote[check/username.php]"  placeholder= "用戶名">
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
/因DOM已經傳參，此處的初始化無關緊要
$( '#demo_61').validator();

 

例2. ajax驗證時，傳遞額外的參數

1. 傳遞的name值須要是表單中已經存在的
2. 能夠傳遞無限個參數
3. 每一個參數之間用英文逗號（,）分隔，逗號後面的空格是必須的
Preview
HTML
< form  id= "demo_62"  action= "results.php"  method= "post"  autocomplete= "off">
< input  type= "hidden"  name= "field1"  value= "111">
< input  type= "hidden"  name= "field2"  value= "222">
< fieldset>
< input  name= "username"  placeholder= "用戶名">
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
//這個例子採用JS初始化，而且附加了兩個額外字段的參數
//規則之間的空格，無關緊要
//remote的多個參數之間使用半角逗號加空格（, ）分隔，注意：逗號後的空格是必須的
$( '#demo_62').validator({
fields: {
'username':  '用戶名: required; username; remote[check/username.php, field1, field2]'
}
});

 

例3. 自定義ajax驗證

1. 若是內置的remote規則不能知足你的需求，能夠  自定義規則 ，將$.ajax()返回出來
2. 提交表單的時機是在表單驗證經過後，這裏演示了valid回調會在表單驗證經過後才被調用
Preview
HTML
< form  id= "demo_63"  autocomplete= "off">
< fieldset>
< input  name= "username"  placeholder= "用戶名">
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
 
 
 
 
$( '#demo_63').validator({
rules: {
//自定義一個規則，用來代替remote（注意：要把$.ajax()返回出來）
myRemote:  function( element){
return $.ajax({
url:  'check/username.php',
type:  'post',
data:  element.name + '='+  element.value,
dataType:  'json',
success:  function(d){
window.console && console.log(d);
}
});
}
},
fields: {
'username':  'required; username; myRemote;'
},
// 表單驗證經過後，ajax提交
valid:  function(form){
$.ajax({
url:  'results.php',
type:  'post',
data: $(form).serialize(),
dataType:  'json',
success:  function(d){
alert( '提交成功！');
}
});
}
});

過濾不安全字符

例1.不安全字符將自動丟掉

1. 直接過濾輸入，不提示錯誤
2. 默認過濾尖括號（<>），你能夠經過傳入字符（支持正則），改變過濾規則
   例如： filter(`%<>\/)，將過濾：`%<>/
Preview
不能爲空
HTML
< form  id= "demo_71"  action= "results.php"  method= "post"  autocomplete= "off"
data-validator-option= "{timely:100,theme:'simple_right'}"
>
< fieldset>
< input  name= "description"  data-rule= "required; filter"  placeholder= "描述">
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

 
 
 
 

Twitter註冊之DOM傳參

1. 大多數表單驗證均可以經過DOM方式傳參
2. 作好全局配置（zh_CN.js），能夠大大減小工做量
3. 若是你不放心DOM自動初始化，也能夠在js中一行代碼初始化一遍 $('#form').validator();
Preview
HTML
< div  id= "result"  class= "tip-ok"  style= "display:none">提交成功</ div>
< form  id= "signup_form"  class= "signup"  data-validator-option= "{stopOnError:true,timely:2}"
autocomplete= "off">
< fieldset>
< div  class= "form-item">
< div  class= "field-name">全名</ div>
< div  class= "field-input">
< input  type= "text"  name= "user[name]"  maxlength= "20"  autocomplete= "off"
data-rule= "required"
data-tip= "輸入你的名字與姓氏。"
data-ok= "名字很棒。"
data-msg-required= "全名必填!"
>
</ div>
</ div>
 
< div  class= "form-item">
< div  class= "field-name">電子郵件地址</ div>
< div  class= "field-input">
< input  type= "text"  name= "user[email]"  autocomplete= "off"
data-rule= "required;email;remote[check/email.php]"
data-tip= "你的郵件地址是什麼?"
data-ok= "咱們將會給你發送確認郵件。"
data-msg-required= "電子郵箱地址必填!"
data-msg-email= "不像是有效的電子郵箱。"
>
</ div>
</ div>
 
< div  class= "form-item">
< div  class= "field-name">建立密碼</ div>
< div  class= "field-input">
< input  type= "password"  name= "user[user_password]"
data-rule= "required;length[6~];password;strength;"
data-tip= "6個或更多字符! 要複雜些。"
data-ok= ""
data-msg-length= "密碼最少爲6位。"
data-msg-required= "密碼不能爲空!"
>
</ div>
</ div>
 
< div  class= "form-item">
< div  class= "field-name">選擇你的用戶名</ div>
< div  class= "field-input">
< input  type= "text"  name= "user[screen_name]"  maxlength= "15"  autocomplete= "off"
data-rule= "required;username;remote[check/user.php]" 
data-rule-username= "[/^[a-zA-Z0-9]+$/, '用戶名無效! 僅支持字母與數字。']"
data-tip= "別擔憂,你能夠稍後進行修改。"
data-ok= "用戶名可使用。<br>你能夠稍後進行修改。"
data-msg-required= "用戶名必填!<br>你能夠稍後進行修改。"
>
</ div>
</ div>
</ fieldset>
< button  id= "btn-submit"  class= "btn-submit"  type= "submit">建立個人帳號</ button>
</ form>

Javascript
$( '#signup_form')
// 驗證成功
.on( 'valid.form',  function(){
$.ajax({
url:  'results.php',
type:  'POST',
data: $( this).serialize(),
success:  function(d){
$( '#result').fadeIn( 300).delay( 2000).fadeOut( 500);
}
});
})
// 驗證失敗
.on( 'invalid.form',  function(){
//按鈕動畫效果
$( '#btn-submit').stop().delay( 100)
.animate({left:- 5},  100)
.animate({left: 5},  100)
.animate({left:- 4},  100)
.animate({left: 4},  100)
.animate({left:- 3},  100)
.animate({left: 0},  100);
});

 
 

Twitter註冊之js傳參

, 更換主題，而後看看下面的提示消息有什麼變化？

1. 無需侵入HTML結構，全js調用
2. 你還能夠自由控制消息的位置，只要設置 msgStyle參數就能夠了，例如："margin-left:10px;margin-top:5px;"
3. 所謂主題，是經過配置表單的class、消息模板以及其餘一些參數實現的不一樣展示效果
4. 全部參數(除了rules和messages), 均可以用來配置主題; 主題名字能夠隨意定義
5. 主題配置能夠覆蓋全局配置，同時也會被調用時的傳參覆蓋
Preview
HTML
< div  id= "result"  class= "tip-ok"  style= "display:none">提交成功</ div>
< form  id= "signup_form"  class= "signup"  autocomplete= "off">
< fieldset>
< div  class= "form-item">
< div  class= "field-name">全名</ div>
< div  class= "field-input">
< input  type= "text"  name= "user[name]"  maxlength= "20"  autocomplete= "off">
</ div>
</ div>
< div  class= "form-item">
< div  class= "field-name">電子郵件地址</ div>
< div  class= "field-input">
< input  type= "text"  name= "user[email]"  autocomplete= "off">
</ div>
</ div>
< div  class= "form-item">
< div  class= "field-name">建立密碼</ div>
< div  class= "field-input">
< input  type= "password"  name= "user[user_password]">
</ div>
</ div>
< div  class= "form-item">
< div  class= "field-name">選擇你的用戶名</ div>
< div  class= "field-input">
< input  type= "text"  name= "user[screen_name]"  maxlength= "15"  autocomplete= "off">
</ div>
</ div>
</ fieldset>
< button  id= "btn-submit"  class= "btn-submit"  type= "submit">建立個人帳號</ button>
</ form>

Javascript
//驗證初始化
$( '#signup_form').validator({
theme:  'yellow_right_effect',
stopOnError: true,
timely:  2,
//自定義規則（PS：建議儘可能在全局配置中定義規則，統一管理）
rules: {
username: [ /^[a-zA-Z0-9]+$/,  '用戶名無效! 僅支持字母與數字。']
},
fields: {
"user[name]": {
rule:  "required",
tip:  "輸入你的名字與姓氏。",
ok:  "名字很棒。",
msg: {required:  "全名必填!"}
},
"user[email]": {
rule:  "email;remote[check/email.php]",
tip:  "你的郵件地址是什麼?",
ok:  "咱們將會給你發送確認郵件。",
msg: {
required:  "電子郵箱地址必填!",
email:  "不像是有效的電子郵箱。"
}
},
"user[user_password]": {
rule:  "required;length[6~];password;strength",
tip:  "6個或更多字符! 要複雜些。",
ok:  "",
msg: {
required:  "密碼不能爲空!",
length:  "密碼最少爲6位。"
}
},
"user[screen_name]": {
rule:  "required;username;remote[check/user.php]",
tip:  "別擔憂,你能夠稍後進行修改。",
ok:  "用戶名可使用。<br>你能夠稍後進行修改。",
msg: {required:  "用戶名必填!<br>你能夠稍後進行修改。"}
}
},
//驗證成功
valid:  function(form) {
$.ajax({
url:  'results.php',
type:  'POST',
data: $(form).serialize(),
success:  function(d){
$( '#result').fadeIn( 300).delay( 2000).fadeOut( 500);
}
});
}
});

 
 
 
 
 

自定義規則

例1. 正則方式 - DOM傳參

DOM傳參： data-rule-ruleName="[RegExp, 'ErrorMessage']"
其中ruleName是規則名字，能夠隨便定義，只要調用規則時保持一致就能夠
Preview
HTML
< form  id= "demo_101"  action= "results.php"  method= "post"  autocomplete= "off"
data-validator-option= "{theme:'yellow_top'}"
>
< fieldset>
<!-- 定義了mobile規則，而且經過data-rule使用 -->
< input  name= "mobile"  placeholder= "手機號"
data-rule= "required; mobile"
data-rule-mobile= "[/^1[3458]\d{9}$/, '請檢查手機號格式']"
>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

 

例2. 正則方式 - JS傳參

JS傳參： ruleName: [RegExp, 'ErrorMessage']
實際上跟DOM傳參是同樣的
Preview
HTML
< form  id= "demo_102"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< input  name= "mobile"  placeholder= "手機號">
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
$( '#demo_102').validator({
rules: {
mobile: [ /^1[3458]\d{9}$/,  '請檢查手機號格式']
},
fields: {
mobile:  'required; mobile'
}
});

 

例3. 回調方式 - JS傳參（具備最大的靈活性，幾乎搞定任何驗證）

JS傳參： ruleName: function(element, param, field) {}
@param element 當前驗證的DOM元素
@param param 規則傳遞的參數
@param field 當前字段元數據
如下是可返回的數據：
return undefined（等同於無return） =>  √經過
return true =>  √經過
return false =>  ×不經過
return "String" =>  ×不經過，而且認爲這個字符串是錯誤消息
return {"ok": "正確提示"} =>  √經過，而且提示這個ok的消息
return {"error": "錯誤消息"} =>  ×不經過，而且提示這個error的消息
return $.ajax()，ajax驗證 => 等待驗證結果（注：ajax返回的數據格式參見remote的示例）
return null => 忽略本次驗證（跳過該字段的驗證，若是已經顯示了消息將會自動隱藏）
Preview
HTML
< form  id= "demo_103"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< input  name= "mobile"  placeholder= "手機號">
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
$( '#demo_103').validator({
rules: {
// 自定義規則mobile，若是經過返回true，不然返回錯誤消息
mobile:  function( element, param, field) {
return /^ 1[3 458]\d{ 9}$/.test( element.value) ||  '請檢查手機號格式';
}
},
fields: {
mobile:  'required; mobile'
}
});

 

例4. 知足「用戶名/手機號/郵箱」之一就合法

自定義規則方法中的this老是指向當前驗證的實例，因此在內部能夠直接調用實例方法（參見： 方法）
注意：下面例子loginName規則中，第一個test是正則表達式的方法，後面兩個 this.test是調用了驗證的 test方法
Preview

HTML
< form  id= "demo_104"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< input  name= "loginName"  placeholder= "用戶名/手機號/郵箱"></ p>
< p>< input  name= "password"  type= "password"  placeholder= "密碼"></ p>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
$( '#demo_104').validator({
rules: {
// 自定義loginName規則，填寫用戶名、手機號或者郵箱
loginName:  function( element) {
return /^[a-zA-Z]\w{ 3,}/.test( element.value) ||
this.test( element,  "mobile")=== true ||
this.test( element,  "email")=== true ||
'請填寫用戶名、手機號或者郵箱';
}
},
fields: {
"loginName":  "required; loginName",
"password":  "required; password"
}
});

 

例5. 自定義ajax驗證

1. 若是內置的 remote規則不能知足你的需求，能夠  自定義規則 ，將$.ajax()返回出來
2. 提交表單的時機是在表單驗證經過後，這裏演示了valid回調會在表單驗證經過後才被調用
Preview
HTML
< div  id= "result"  class= "tip-ok"  style= "display:none">提交成功</ div>
< form  id= "demo_105"  autocomplete= "off">
< fieldset>
< input  name= "username"  placeholder= "用戶名">
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
$( '#demo_105').validator({
rules: {
username:  function( element) {
return /^[a-zA-Z]\w{ 3,}/.test( element.value) ||  '字母開頭，至少4位';
},
//自定義remote規則（注意：雖然remote規則已經內置，但這裏的remote會優先於內置）
remote:  function( element){
return $.ajax({
url:  'check/username.php',
type:  'post',
data:  element.name + '='+  element.value,
dataType:  'json',
success:  function(d){
window.console && console.log(d);
}
});
}
},
fields: {
'username':  'required; username; remote;'
},
// 表單驗證經過後，ajax提交
valid:  function(form){
var me =  this;
// ajax提交表單以前，先禁用submit
me.holdSubmit();
$(form).find( 'button').css( 'color',  '#999').text( '正在提交..');
$.ajax({
url:  'results.php',
type:  'post',
data: $(form).serialize(),
dataType:  'json',
success:  function(d){
$(form).find( 'button').css( 'color',  '#333').text( '提交');
$( '#result')
.fadeIn( 300).delay( 2000)
.fadeOut( 500,  function(){
// 直到動畫結束，才能夠再次提交
me.holdSubmit( false);
});
}
});
}
});

 

例6. 自定義required的驗證條件

required(condition)，只有知足condition規則，才驗證required
Preview

 

HTML
< form  id= "demo_106"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>
< label>< input  type= "radio"  name= "regType"  id= "personal"> 我的</ label>
< label>< input  type= "radio"  name= "regType"  id= "company" checked> 公司</ label>
</ p>
< p>< input  type= "text"  name= "tel"  placeholder= "固定電話"  class= "asfaf"></ p>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
$( '#demo_106').validator({
rules: {
isCompany:  function( element) {
// 返回true，則驗證必填
return $( "#company").is( ":checked");
}
},
fields: {
tel:  'required(isCompany); tel'
}
});

 
 

自定義消息顯示位置

例1. 驗證隱藏域，消息顯示在代理的輸入框周圍

DOM傳參：data-target="jQuery選擇器"
若是「jQuery選擇器」選擇的DOM是輸入框，該輸入框將成爲消息位置的代理
不然消息直接顯示在「jQuery選擇器」選擇的DOM內部

下面的例子中，實際驗證和提交的是「pid」字段，不要在乎乎表象^_^

Preview
HTML
< form  id= "demo_111"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< input  type= "hidden"  id= "pid"  name= "pid"  data-rule= "required;"  data-target= "#product">
< input  id= "product"  placeholder= "點擊選擇產品" readOnly>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
$( "#product").on( 'click',  function(){
$.dialog({
title:  '選擇產品',
content: $( '#tpl_product').html(),
onOpen:  function($d){
$d.on( 'click',  'a[data-pid]',  function(){
//賦值後觸發驗證
$( '#pid').val( $( this).attr( 'data-pid') ).trigger( 'validate');
$( '#product').val( $( this).text() );
$.dialog.close();
});
}
});
});

 

例2. 設置消息佔位，精確控制消息位置

<span class="msg-box" for="inputID"></span>
inputID對應input的id（若是input有id）或者input的name
把這段DOM放到哪一個位置，消息就顯示在哪兒，還能夠經過給這個span寫style內聯樣式，控制更精準的位置
注意：
消息佔位的標籤由msgWrapper參數（默認爲span）決定，若是設置了msgWrapper: label，那麼這裏的標籤也要用label
Preview
 
HTML
< form  id= "demo_112"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< input  name= "mobile"  id= "mobile"  placeholder= "手機號"  data-rule= "required; mobile;">
</ fieldset>
< button  type= "submit">提交</ button>
< span  class= "msg-box n-right"  style= "position:static;"  for= "mobile"></ span>
</ form>

 

例3. 統一顯示消息在一個位置

一、設置 msgMaker 參數爲false，就不會再自動生成消息
二、使用 invalid 回調的第二個參數 errors
注意：
此功能在0.5.0+版本按如下方式支持，以前版本的msgHandler參數已被移除
Preview
 
 
HTML
< div  id= "msg_holder"></ div>
 
< form  id= "demo_113"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< input  name= "mobile"  placeholder= "手機號"  data-rule= "手機號: required;mobile;">
< input  name= "email"  placeholder= "郵箱"  data-rule= "郵箱: required;email;">
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
$( '#demo_113').validator({
stopOnError:  false,  //關閉此開關，以便一次性顯示全部消息
msgMaker:  false,  //不要自動生成消息
invalid:  function(form, errors){
var html =  '';
$.map(errors,  function(msg){
html +=  '<p class="red">'+ msg + '</p>'
});
$( '#msg_holder').html(html);
}
});

 

高亮錯誤

不論是高亮錯誤，仍是高亮錯誤區域，都須要本身定義CSS（不肯定的樣式須要你本身來實現）

例1. 高亮出錯的輸入框

1. 字段驗證失敗後，該輸入框會自動添加一個class（ n-invalid），字段驗證經過後又會自動移除這個class
2. 能夠自定義這個class的樣式，實現高亮輸入框
Preview

HTML
< form  id= "demo_121"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< input  name= "user[name]"  data-rule= "required;username"  placeholder= "用戶名"></ p>
< p>< input  name= "user[pwd]"  data-rule= "required;password"  placeholder= "密碼"></ p>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

CSS
1
#demo_121 .n-invalid { border: 1 px solid #f00;}
 

例2. 高亮出錯的區域

1. 原理是經過 invalid.field事件，找到父節點添加一個class
2. 須要表單結構的配合，具體要看你表單的結構是什麼樣子來靈活使用
Preview
HTML
< form  id= "demo_122"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< div  class= "form-item">
< input  name= "user[name]"  placeholder= "用戶名">
</ div>
< div  class= "form-item">
< input  name= "user[pwd]"  placeholder= "密碼">
</ div>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

CSS
12
#demo_122 .form-item { padding:5 px; margin:2 px 0;}
#demo_122 .form-item-error { background: #FDE2E9;}
Javascript
$( '#demo_122').validator({
stopOnError:  true,
fields: {
"user[name]":  "required;username"
, "user[pwd]":  "required;password"
}
})
//字段驗證失敗後，添加錯誤高亮
.on( 'valid.field invalid.field',  ':input',  function(e){
$( this).closest( '.form-item')[ e.type ===  "valid" ?  "removeClass" :  "addClass" ]( 'form-item-error');
})

 

例3. 高亮出錯的區域，出錯後不要中止驗證

和例2大同小異，只不過加了幾個參數
Preview
HTML
< form  id= "demo_123"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< div  class= "form-item">
< input  name= "user[name]"  placeholder= "用戶名">
</ div>
< div  class= "form-item">
< input  name= "user[pwd]"  placeholder= "密碼">
</ div>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

CSS
12
#demo_123 .form-item { padding:5 px; margin:2 px 0;}
#demo_123 .form-item-error { background: #FDE2E9;}
Javascript
$( '#demo_123').validator({
stopOnError:  false,
fields: {
"user[name]":  "required;username"
, "user[pwd]":  "required;password"
}
})
//字段驗證失敗後，添加錯誤高亮
.on( 'valid.field invalid.field',  ':input',  function(e){
$( this).closest( '.form-item')[ e.type ===  "valid" ?  "removeClass" :  "addClass" ]( 'form-item-error');
})

 
 

組合驗證

參見：文檔 > 參數配置 > groups
組合驗證有多種用途：
1. 當多個字段中，只要填寫部分字段就經過的狀況
2. 若是多個字段有關聯性的時候，例如：每驗證其中一個字段就須要作一下處理

例一、組合多個字段，至少正確填寫其中任意一個字段，而且其餘字段無錯則經過

Preview

HTML
< form  id= "demo_131"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< input  name= "mobile"  data-rule= "mobile"  placeholder= "手機號"  id= "mobile"></ p>
< p>< input  name= "tel"  data-rule= "tel"  placeholder= "電話"></ p>
< p>< input  name= "email"  data-rule= "email"  placeholder= "郵箱"></ p>
</ fieldset>
< button  type= "submit">提交</ button> < span  class= "msg-box"  id= "msgHolder"></ span>
</ form>


Javascript
$( '#demo_131').validator({
stopOnError:  true,
groups: [{
fields:  "tel mobile email",
callback:  function($elements){
var me =  this, count =  0;
$elements.each( function(){
//利用test方法調用內置規則required
if (me.test( this,  'required')) count+= 1;
});
return count>= 1 ||  '請至少填寫一種聯繫方式';
},
target:  "#msgHolder"
}]
});

 
 

使用ID標識字段

例1. 字段只有id，沒有name的狀況

這種狀況，既能夠js傳參，也能夠DOM傳參
下面例子的兩個字段，分別使用了js傳參和DOM傳參
Preview

HTML
< form  id= "demo_141"  autocomplete= "off">
< fieldset>
< p>< input  id= "aaa"></ p>
< p>< input  id= "bbb"  data-rule= "required"></ p>
< span  class= "msg-box m-top"  id= "ccc"></ span>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
$( '#demo_141').validator({
fields: {
'#aaa':  'required'
},
valid:  function(form){
alert( "驗證經過");
}
});

 

例2. 字段有name，可是使用id來標識

這種狀況只能經過js傳參，由於DOM傳參會優先使用name做爲標識
Preview

HTML
< form  id= "demo_142"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< input  name= "username"  id= "aaa" >
</ p>
< p>< input  name= "password"  id= "bbb"  type= "password">
</ p>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

Javascript
$( '#demo_142').validator({
stopOnError:  false,
fields: {
'#aaa':  'required; username',
'#bbb':  'required; password'
}
});

 

例3. 爲多個相同name的字段設置不一樣id，實現分別顯示消息

若是多個字段name相同，而且要分別顯示消息，就要爲他們設置不一樣的id
Preview

HTML
< form  id= "demo_143"  action= "results.php"  method= "post"  autocomplete= "off">
< fieldset>
< p>< input  name= "pid[]"  id= "pid1"  data-rule= "required; integer[+]; length[6]"></ p>
< p>< input  name= "pid[]"  id= "pid2"></ p>
</ fieldset>
< button  type= "submit">提交</ button>
</ form>

 
Twitter註冊-Dom傳參
< div id= "result" class= "tip-ok" style= "display:none">提交成功</ div>
< form id= "signup_form" class= "signup" data-validator-option= "{stopOnError:true,timely:2}"
autocomplete= "off">
< fieldset>
< div class= "form-item">
< div class= "field-name">全名</ div>
< div class= "field-input">
< input type= "text" name= "user[name]" maxlength= "20" autocomplete= "off"
data-rule= "required"
data-tip= "輸入你的名字與姓氏。"
data-ok= "名字很棒。"
data-msg-required= "全名必填!"
>
</ div>
</ div>
 
< div class= "form-item">
< div class= "field-name">電子郵件地址</ div>
< div class= "field-input">
< input type= "text" name= "user[email]" autocomplete= "off"
data-rule= "required;email;remote[check/email.php]"
data-tip= "你的郵件地址是什麼?"
data-ok= "咱們將會給你發送確認郵件。"
data-msg-required= "電子郵箱地址必填!"
data-msg-email= "不像是有效的電子郵箱。"
>
</ div>
</ div>
 
< div class= "form-item">
< div class= "field-name">建立密碼</ div>
< div class= "field-input">
< input type= "password" name= "user[user_password]"
data-rule= "required;length[6~];password;strength;"
data-tip= "6個或更多字符! 要複雜些。"
data-ok= ""
data-msg-length= "密碼最少爲6位。"
data-msg-required= "密碼不能爲空!"
>
</ div>
</ div>
 
< div class= "form-item">
< div class= "field-name">選擇你的用戶名</ div>
< div class= "field-input">
< input type= "text" name= "user[screen_name]" maxlength= "15" autocomplete= "off"
data-rule= "required;username;remote[check/user.php]"
data-rule-username= "[/^[a-zA-Z0-9]+$/, '用戶名無效! 僅支持字母與數字。']"
data-tip= "別擔憂,你能夠稍後進行修改。"
data-ok= "用戶名可使用。<br>你能夠稍後進行修改。"
data-msg-required= "用戶名必填!<br>你能夠稍後進行修改。"
>
</ div>
</ div>
</ fieldset>
< button id= "btn-submit" class= "btn-submit" type= "submit">建立個人帳號</ button>
</ form>
 
$( '#signup_form')
// 驗證成功
.on( 'valid.form', function(){
$.ajax({
url: 'results.php',
type: 'POST',
data: $( this).serialize(),
success: function(d){
$( '#result').fadeIn( 300).delay( 2000).fadeOut( 500);
}
});
})
// 驗證失敗
.on( 'invalid.form', function(){
//按鈕動畫效果
$( '#btn-submit').stop().delay( 100)
.animate({left:- 5}, 100)
.animate({left: 5}, 100)
.animate({left:- 4}, 100)
.animate({left: 4}, 100)
.animate({left:- 3}, 100)
.animate({left: 0}, 100);
});
 
Twitter註冊-JS傳參 
<div id="result" class="tip-ok" style="display:none">提交成功</div>
<form id="signup_form" class="signup" autocomplete="off">
<fieldset>
    <div class="form-item">
        <div class="field-name">全名</div>
        <div class="field-input">
          <input type="text" name="user[name]" maxlength="20" autocomplete="off">
        </div>
    </div>
    <div class="form-item">
        <div class="field-name">電子郵件地址</div>
        <div class="field-input">
          <input type="text" name="user[email]" autocomplete="off">
        </div>
    </div>
    <div class="form-item">
        <div class="field-name">建立密碼</div>
        <div class="field-input">
          <input type="password" name="user[user_password]">
        </div>
    </div>
    <div class="form-item">
        <div class="field-name">選擇你的用戶名</div>
        <div class="field-input">
          <input type="text" name="user[screen_name]" maxlength="15" autocomplete="off">
        </div>
    </div>
</fieldset>
    <button id="btn-submit" class="btn-submit" type="submit">建立個人帳號</button>
</form>

//驗證初始化
$('#signup_form').validator({ 
    stopOnError:true,
    timely: 2,
    //自定義規則（PS：建議儘可能在全局配置中定義規則，統一管理）
    rules: {
        username: [/^[a-zA-Z0-9]+$/, '用戶名無效! 僅支持字母與數字。']
    },
    fields: {
        "user[name]": {
            rule: "required",
            tip: "輸入你的名字與姓氏。",
            ok: "名字很棒。",
            msg: {required: "全名必填!"}
        },
        "user[email]": {
            rule: "email;remote[check/email.php]",
            tip: "你的郵件地址是什麼?",
            ok: "咱們將會給你發送確認郵件。",
            msg: {
                required: "電子郵箱地址必填!",
                email: "不像是有效的電子郵箱。"
            }
        },
        "user[user_password]": {
            rule: "required;length[6~];password;strength",
            tip: "6個或更多字符! 要複雜些。",
            ok: "",
            msg: {
                required: "密碼不能爲空!",
                length: "密碼最少爲6位。"
            }
        },
        "user[screen_name]": {
            rule: "required;username;remote[check/user.php]",
            tip: "別擔憂,你能夠稍後進行修改。",
            ok: "用戶名可使用。<br>你能夠稍後進行修改。",
            msg: {required: "用戶名必填!<br>你能夠稍後進行修改。"}
        }
    },
    //驗證成功
    valid: function(form) {
        $.ajax({
            url: 'results.php',
            type: 'POST',
            data: $(form).serialize(),
            success: function(d){
                $('#result').fadeIn(300).delay(2000).fadeOut(500);
            }
        });
    },
    //驗證失敗
    invalid: function(form) {
        //按鈕動畫效果
        $('#btn-submit').stop().delay(100)
            .animate({left:-5}, 100)
            .animate({left:5}, 100)
            .animate({left:-4}, 100)
            .animate({left:4}, 100)
            .animate({left:-3}, 100)
            .animate({left:0}, 100);
    }
});

------------------------------------------------------------------------------

使用方式（Usage）
僅做爲入門指引，詳細瞭解建議查看公共定義以及配置說明
第一步、引入資源
使用以前，確保已經引入了jQuery，須要 1.7 以上版本。

<script type="text/javascript" src="path/to/jquery-1.7.2.min.js"></script>
而後引入驗證插件，其中「zh_CN.js」 是本地化配置文件，你能夠在裏面配置一些全局的參數（規則、主題、多語言消息）。

<link rel="stylesheet" href="path/to/validator/jquery.validator.css">
<script type="text/javascript" src="path/to/validator/jquery.validator.js"></script>
<script type="text/javascript" src="path/to/validator/local/zh_CN.js"></script>
第二步、使用組件
兩種方式（js傳參 和 DOM傳參），均可以實現表單驗證：

經過JS傳參，無需改變DOM。
@example
<form name="register">
<label>郵箱</label><input name="email">
</form>
$('form[name="register"]').validator({
stopOnError: false,
timely: false,
fields: {
'email': 'required;email;'
}
});
經過在DOM上綁定屬性，無需js調用。
a. 在字段上綁定規則，參見公共定義-規則
b. 若是要改變默認參數，能夠在form上以json字符串形式綁定參數data-validator-option，參見公共定義-表單
c. 若是參數所有在DOM元素上面傳遞，那麼js就不須要初始化了
@example
<form name="register" data-validator-option="{stopOnError:false, timely:false}">
<label>郵箱</label><input name="email" data-rule="required;email;">
</form>
沒理解？先看看示例，再來研究文檔吧！

公共定義（Common）
幫助你理解nice Validator的驗證方式
規則（rule）
"display: rule1; rule2; ... rulen;"

1. 前面的display:是可選的，用於替換錯誤消息中顯示的字段名。
2. 後面的 rule1 ~ rulen 表明規則，規則之間須要使用分號（;）分隔，最後一個規則後面的分號可選
3. 冒號（:）或者分號（;）後面能夠有空格
@example:

例如required規則的默認消息模板爲：{0}不能爲空

data-rule="required; username;" //required規則驗證失敗後，將提示："不能爲空"
data-rule="用戶名: required; username;" //required規則驗證失敗後，將提示："用戶名不能爲空
a. 每條規則之間用分號（;）分隔，分號後能夠有空格，不限規則數量，規則越靠前越先被驗證
b. 若是一條規則被定義爲能夠傳參數，那麼全部參數須要使用圓括號（()）或者方括號（[]）括起來;
c. 若是有多個參數，那麼每一個參數之間須要使用「逗號+空格」隔開
DOM上綁定規則，使用data-rule-* = "[RegExp, 'errorMessage']"

@example:

<input name="demo" data-rule="required; xxx" data-rule-xxx="[/^\d{6}$/, '請輸入6位數字']">
該例子定義了名字爲「xxx」的規則，使用了正則表達式，且附帶了錯誤消息，若是xxx驗證失敗將提示「請輸入6位數字」。 實際上，你甚至能夠覆蓋內置或者全局的規則，例如required
js調用時傳遞規則，使用rules參數，這和在HTMl結構中定義規則是同樣效果

@example:

<form id="yourForm">
<input name="demo">
</form>
$("#yourForm").validator({
rules: {
xxx: [/^\d{6}$/, '請輸入6位數字']
},
fields: {
demo: "required; xxx"
}
});
字段（field）
字段是表單的基本構成。驗證組件收集配置信息時也會以字段爲單位
DOM傳參支持的屬性

a. 若是要使一個字段被驗證，data-rule參數是必不可少的，其餘參數均可選
b. 支持的屬性：data-rule、data-rule-*、data-msg-*、data-tip、data-ok、data-target、novalidate、notimely
@example:

1<form id="yourForm">
<input type="password" name="demo"
data-rule="required; password"
data-rule-password="[/^\d{6}$/, '請填寫6位數字']"
data-msg-required="請填寫密碼"
data-tip="密碼由6位數字組成"
data-ok="別擔憂，稍後您還能夠更改"
data-target="#msg_holder"
>
</form>
上面例子中：

data-rule 定義該字段的規則集
data-rule-password 定義了一條臨時規則（在data-rule中已經使用了）
data-msg-required 更改了默認required的消息；
data-tip 參數使得元素得到焦點時，顯示友好的信息；
data-ok 定義的消息，將在字段驗證成功後顯示；
data-target 若是定義，將決定消息最終顯示位置。若是「#msg_holder」是字段（如input、select、textarea），消息的顯示位置將轉爲該字段的消息位置，若是是帶有「.msg-box」類的DOM，將顯示在該DOM內；
另外兩個特殊屬性，不須要帶值：
novalidate 不要驗證該字段，動態添加和移除該屬性可使該字段在合適的時候驗證
notimely 不要實時驗證該字段，動態添加和移除該屬性可使該字段在合適的時候驗證
使用JS傳參方式

@example:

<form id="yourForm">
<input type="password" name="demo">
</form>
11111$("#yourForm").validator({
rules: {
xxx: [/^\d{6}$/, '請輸入6位數字']
},
fields: {
demo: {
rule: "required; xxx",
msg: {required: "請填寫密碼"},
tip: "密碼由6位數字組成",
ok: "別擔憂，稍後您還能夠更改",
target: "#msg_holder"
}
}
});
表單（form）
表單也能夠接收參數
@example:

<form id="yourForm" data-validator-option="{stopOnError:false, timely:false}">
<input type="password" name="password" data-rule="required;password">
</form>
data-validator-option 接收和js配置同樣的json字符串
novalidate 指示暫時不要初始化該表單的驗證，動態移除後，初始化仍是會執行
配置說明（options）
debug {Number | Boolean}
默認: 是否啓用調試模式，可用值:

0 || false: 關閉調試信息
1 || true: 啓用調試信息
2: 啓用調試信息，而且不論表單是否驗證成功都提交表單，便於對比後端的驗證
timely {Number | Boolean}
默認: 是否啓用實時驗證，可用值:

0 || false: 關閉實時驗證，將只在提交表單的時候進行驗證
1 || true: 啓用實時驗證，在字段失去焦點後驗證該字段
2: 啓用實時驗證，在輸入的同時驗證該字段
theme {String}
默認: 'default'
主題名字，用於設置一個表單驗證的主題樣式。zh_CN.js中配置了幾個主題，能夠做爲參考

stopOnError {Boolean}
默認: false
是否在驗證出錯時中止繼續驗證，默認不中止

focusInvalid {Boolean}v0.7.0+
默認: true
是否自動讓第一個出錯的輸入框得到的焦點，默認得到

focusCleanup {Boolean}v0.7.0+
默認: false
是否在輸入框得到焦點的時候清除消息，默認不清除

ignore {jqSelector}
指定須要忽略驗證的元素的jQuery選擇器，Example:

111//任何不可見的元素，都不做驗證
$('form').validator({
ignore: ':hidden'
});
//id爲tab2下的全部子元素都不做驗證
$('form').validator({
ignore: '#tab2'
});
//動態改變要忽略驗證的元素
$('form').data('validator').options.ignore = '#tab1';
rules {Object}
自定義用於當前實例的規則，支持兩種定義方式。Example:

11111$('form').validator({
rules: {
//自定義驗證函數，具備最大的靈活性，沒有什麼不能驗證
myRule: function(el, param, field){
//do something...
},
//簡單配置正則及錯誤消息，及其方便
another: [/^\w*$/, '請輸入字母或下劃線']
},
fields: {
//調用前面定義的兩個規則
foo: 'required; myRule[param]; another'
}
});
messages {Object}
自定義用於當前實例的規則消息，Example:

$('form').validator({
messages: {
required: "請填寫該字段",
email: "請檢查郵箱格式",
},
fields: {
'email': 'required;email;'
}
});
fields {Object}
待驗證的字段集合，鍵爲字段的name值或者"#"+字段id。有兩種用法：

快捷字符串傳參："name": "display: rule1;rule2;...rulen"，其中「display:」可選，用於替換錯誤消息的字段名字
對象傳參：
111111111fields: {
//name字段使用了全部支持的參數
name: {
rule: "姓名: required; rule2; rule3",
msg: {
required: "請填寫姓名",
rule2: "xxxx",
rule3: "xxxx"
},
tip: "填寫真實姓名有助於朋友找到你",
ok: "",
timely: false,
target: "#msg_holder"
},
//email和mobile字段用最簡單的方式傳遞字段規則
email: "required; email",
mobile: "mobile"
}
fields[name].rule {String}
字段的驗證規則，多個規則用分號（;）分隔，支持使用方括號（[ ]）或者圓括號（( )）傳參。查看內置規則

fields[name].msg {Object}
自定義字段中每一個規則的錯誤消息

fields[name].tip {String}
自定義得到焦點時的友好提示信息

fields[name].ok {String}
自定義字段驗證成功後顯示的消息

fields[name].msgWrapper {String}
自定義該字段的消息容器的標籤名

fields[name].msgMaker {Function}
自定義該字段的消息生成器

fields[name].msgClass {String}
自定義該字段的消息Class

fields[name].msgStyle {String}
自定義該字段的消息CSS樣式

fields[name].dataFilter {Function}
使用dataFilter回調能夠轉換ajax返回的結果爲niceValidator支持的格式

fields[name].valid {Function}
字段驗證經過的回調

fields[name].invalid {Function}
字段驗證失敗的回調

fields[name].must {Boolean}
是否強制驗證該字段

fields[name].timely {Boolean}
是否啓用實時驗證，默認值繼承自options的timely參數

fields[name].target {jqSelector}
驗證當前字段，可是實際上在target的元素上提示錯誤消息，
若是目標元素是輸入框（input，textarea、select），將會以目標元素爲基準點，插入一條消息；
若是目標元素是消息佔位（className爲msg-box），這和直接使用消息佔位沒有區別
其餘狀況下，直接顯示在target指向的容器中

groups {Array}v0.2.1+
組合多個字段，驗證其中的每個字段都會首先觸發callback回調。Example:

11111$('form').validator({
groups: [{
fields: 'field1 field2 field3',
callback: function($elements){
//do something
},
target: '#msg_holder'
}],
fields: {
field1: 'tel',
field2: 'mobile',
field3: 'email'
}
});
beforeSubmit(form){Function} v0.5.0+
提交表單以前的回調，有一個參數：當前表單對象，若是在beforeSubmit內部返回false，將認爲是取消本次提交

dataFilter(data){Function} v0.6.0+
使用dataFilter回調能夠轉換ajax返回的結果爲niceValidator支持的格式

valid(form){Function}
表單驗證成功後的回調，有一個參數：當前表單對象，支持事件綁定

invalid(form, errors){Function}
@param: {Element} form 表單DOM

@param: {Array} errors 錯誤消息數組

表單驗證失敗後的回調，支持事件綁定

如下配置與主題相關（通常在setTheme()中使用，或者全局配置）

defaultMsg{String}
默認: "{0} is not valid."
默認的錯誤消息，通常在全局配置裏面配置一下就能夠了

loadingMsg{String}
默認: "Validating..."
異步加載中的提示，通常在全局配置裏面配置一下就能夠了

showOk{Boolean | String}
默認: true
是否顯示成功提示（注意：前提是有傳ok的消息），若是設置成false在字段驗證經過後將只是簡單的隱藏消息。
還有另外一種用法：若是傳遞一個字符串，在驗證經過後將提示這個消息，若是設置成空字符串，將只顯示一個成功的圖標

11//字段驗證經過後提示「正確」
$('form').validator({
showOk: "正確"
});
//對於simple_right主題，驗證經過後默認不會提示，只是單純的隱藏錯誤消息
//加上 showOk: "" 這個配置後，將顯示一個經過的圖標
$('form').validator({
theme: "simple_right",
showOk: ""
});
validClass{String}v0.7.0+
默認: "n-valid"
字段驗證經過後自動給輸入框添加的class名。

invalidClass{String}v0.7.0+
默認: "n-invalid"
字段驗證失敗後自動給輸入框添加的class名。

formClass{String}
默認: ""
給表單額外添加的class名，用於自定義主題。這個class就是一個主題的樣式命名空間

msgClass{String}
默認: ""
給消息額外添加的class名，用於自定義主題，控制消息樣式。msgClass建議使用如下4個class之一，驗證組件可以根據方向關鍵字智能識別並控制消息的顯示位置，你也能夠在這4個class的基礎上再加上本身定義的class名，用空格隔開就能夠了

msgClass: "n-top" //消息將自動顯示在輸入框上邊
msgClass: "n-right" //消息將自動顯示在輸入框右邊
msgClass: "n-bottom" //消息將自動顯示在輸入框下邊
msgClass: "n-left" //消息將自動顯示在輸入框左邊
msgClass: "n-right myclass" //消息將自動顯示在輸入框右邊，你還能夠經過myclass來定義更多樣式
msgStyle{String}
默認: ""
有時候主題定義的消息樣式的位置沒有達到預期，就能夠經過msgStyle參數傳遞css規則來精確控制消息位置

$('form').validator({
theme: "simple_right",
msgStyle: "margin-left:-10px; margin-top:10px;",
fields: {
'email': 'required;email;'
}
});
msgWrapper{String} v0.5.0+
默認: "span"
消息容器的標籤名，多用於自定義主題

msgMaker{Function} v0.5.0+
默認: 內置消息構造器
消息構造器，能夠用來自定義消息的結構

以下代碼：

1$('#form').validator({
fields: {
'user[name]': 'required;username'
,'user[pwd]': 'required;password'
},
msgWrapper: 'div',
msgMaker: function(opt){
return '<span class="'+ opt.type +'">' + opt.msg + '</span>';
}
});
最後自動生成的消息爲：

<div class="msg-box n-right" for="user[name]">
<span class="n-error">不能爲空</span>
</div>
msgIcon{String}
默認: "<span class="n-icon"></span>"
icon圖標模板，用於自定義主題，參見local文件夾下的配置文件

msgArrow{String}
默認: ""
小箭頭模板，用於自定義主題，參見local文件夾下的配置文件

msgShow{Function}
默認: null
消息顯示以前的回調，可用於自定義消息動畫。有兩個參數：當前消息的jQuery對象和消息類型。參見local文件夾下的配置文件

msgHide{Function}
默認: null
消息隱藏以前的回調，可用於自定義消息動畫。有兩個參數：當前消息的jQuery對象和消息類型。參見local文件夾下的配置文件

內置規則（rules）
公共定義：
1. 數值範圍使用波浪線（~）表示，例如：6~（大於等於6）、~6（小於等於6）、6~16（6到16）
2. 大小比較使用 lt（小於）、lte（小於等於）、gt（大於）、gte（大於等於）、eq（等於）表示
3. 若是某個規則能夠帶參數，參數要使用方括號（[]）或者圓括號（()）括起來，取決於你的習慣
規則 參數 描述 例子
required 必填項
required //不能爲空
required(xxx) //知足xxx規則，才驗證required
required(not, xxx) //若是值爲空，或者xxx也認爲是空
integer 可選，標識 整數
integer //請輸入整數
integer[*] //請輸入整數
integer[+] //請輸入正整數
integer[+0] //請輸入正整數或integer[-] //請輸入負整數
integer[-0] //請輸入負整數或match 可選，標識
必選, 另外一字段名 與另外一字段匹配，兩種用法：

match[name];
用於驗證兩個字段的值必須相同

match[condition, name];
用於比較兩個字段大小
match[password] //與password字段的值匹配
match[lt,money] //小於money字段的值
match[lte,money] //小於等於money字段的值
match[eq,money] //等於money字段的值匹配
match[gte,money] //大於等於money字段的值
match[gt,money] //大於money字段的值
range 必選，範圍值 數值範圍
range[0~99] //0到99的整數
range[~99] //小於或等於99的整數
range[0~] //大於或等於0的整數
length 必選，範圍值
可選，是否計算真實長度 驗證字符長度
length[6~16] //6-16個字符
length[6] //6個字符
length[~6] //小於6個字符
length[6~] //大於6個字符

length[~6, true] //小於6個字符,全角字符計算雙字符
checked 可選，範圍值 對於checkbox或radio
必需要選中多少項
checked //必填，至關於required
checked[3~5] //請選擇3到5項
checked[3] //請選擇3項
checked[~5] //請選擇少於5項
checked[3~] //請選擇大於3項
remote 必選，url地址
可選，附帶額外的字段 遠程驗證
remote[path/to/server.php]
remote[path/to/server.php, name1, name2, ..]
方法（Methods）
1. 如下API描述中，使用 $form 代替form元素的jQuery對象，具體根據您的實際應用場景來決定
2. 全部使用 validator() 代理調用的方法，其返回值都是jQuery包裝對象，能夠繼續鏈式調用
$form.validator( options )
根據傳入的options，初始化表單驗證

@param: {Object} options 配置參數

@return: {jqObject} $form

@example:

$('form').validator({
//自定義用於當前實例的規則
rules: {
username: function(element, params){
//內部的this指向的是當前實例，能夠直接調用全部方法，這裏調用了test方法
return this.test(element, 'email') || this.test(element, 'mobile') ||
'用戶名能夠輸入郵箱或者手機號';
}
},
//自定義用於當前實例的消息
messages: {
required: "請填寫{0}",
email: "郵箱地址不合法"
},
//待驗證字段集合
fields: {
username: 'required; username;',
password: 'required; length[6~16]',
email: 'email;'
},
valid: function(form){
//表單驗證經過，提交表單到服務器
$.ajax({
url: "result.php",
data: $(form).serialize(),
success: function(d){
//do something
}
});
}
});
$form.validator( validCallback ) v0.3.0+
初始化表單驗證，在表單驗證經過後執行validCallback回調

@param: {Function} validCallback 表單驗證經過後的回調

@return: {jqObject} $form

@example:

//初始化驗證，而且傳入驗證成功的回調
$('form').validator(function(form){
$(form).ajaxSubmit({
//some options
});
});
instance = $form.data( "validator" )
獲取表單驗證的實例

@base: 驗證已經初始化

@return: {Object} 實例（instance）

@example:

//初始化驗證，而且引用驗證的實例
var v = $('form').validator().data('validator');
//使用實例的showMsg方法
v.showMsg('#mobile', '請填寫手機號');
$input.isValid( callback ) v0.3.0+
判斷某個字段是否驗證經過（$input表明表單元素的jQuery對象）

@base: 驗證已經初始化

@param: {Function} callback 傳入的回調

@return: {Boolean} 注意，若是有ajax的異步驗證，返回值老是undefined

@example:

11//若是字段上面沒有ajax驗證，你能夠像下面這樣直接判斷
if ( $('#mobile').isValid() ) {
// do something
}
//不然只能經過回調方式獲取驗證結果（用上面的方式將老是返回undefined）
$('#mobile').isValid(function(v){
if (v) {
// do something
}
});
$elements.isValid( callback ) v0.3.0+
判斷某個區域是否驗證經過（$elements表明一個區域的jQuery對象）

@base: 驗證已經初始化

@param: {Function} callback 傳入的回調

@return: {Boolean} 注意，若是有ajax的異步驗證，返回值老是undefined

@example:

//檢測表單是否全部字段都驗證經過
$('#formId').isValid(function(v){
console.log(v ? '表單驗證經過' : '表單驗證不經過');
});
instance.isFormValid() v0.7.0+
判斷當前表單是否驗證經過
注意：由於該方法有返回布爾值，因此只能經過實例的方式調用

@base: 驗證已經初始化

@return: {Boolean} 當肯定驗證結果的時候，返回true或者false，當不肯定的時候返回undefined

instance.cleanUp() v0.7.0+
或者 $form.validator( "cleanUp" )
調用該方法後，會清除表單中已經顯示的驗證消息

@base: 驗證已經初始化

instance.destroy()
或者 $form.validator( "destroy" )
銷燬表單驗證，包括事件和實例

@base: 驗證已經初始化

instance.holdSubmit( hold ) v0.4.0+
或者 $form.validator( "holdSubmit", hold )
用來禁止或者釋放submit事件的驗證和提交。
注意：若是你hold住了表單後一直不釋放hold，這個表單就等於只能提交一次

@base: 驗證已經初始化

@param: {Boolean} hold 是否控制住submit事件，默認true（不傳參）

@example:

$("#myForm").validator({
valid: function(form){
var me = this;
// 提交表單以前，hold住表單，防止重複提交
me.holdSubmit();
$.ajax({
url: "xxx.php",
data: $(form).serialize(),
type: "POST",
success: function(){
// 提交表單成功後，釋放hold，若是不釋放hold，就變成了只能提交一次的表單
me.holdSubmit(false);
}
});
}
});
hold參數爲true或者不傳，表示要hold住，還能夠爲回調函數，也是要hold住，只不過在每次被hold住的時候都會執行該回調

$("#myForm").validator({
valid: function(form){
var me = this;
// 提交表單以前，hold住表單，而且在之後每次hold住時執行回調
me.holdSubmit(function(){
alert("正在處理中...");
});
$.ajax({
url: "xxx.php",
data: $(form).serialize(),
type: "POST",
success: function(){
// 提交表單成功後，釋放hold，就能夠再次提交
me.holdSubmit(false);
}
});
}
});
instance.test( element, ruleName )
測試某個元素是否符合某個規則，參數 ruleName 能夠帶參數，例如：this.test(element, "range[0~100]")
注意：
一、由於該方法有返回布爾值，因此只能經過實例的方式調用
二、該方法沒法測試remote規則，以及其餘異步驗證的規則。

@base: 驗證已經初始化

@param: {Element} element 字段元素

@param: {String} ruleName 規則名字

@return: {Boolean}

1111111$("#myForm").validator({
rules: {
// 自定義規則：符合用戶名、手機號或者郵箱規則都算經過
// 注意：第一個test是正則的方法，後面兩個是this.test()是當前實例的方法
loginName: function(element) {
return /^[a-zA-Z]\w{3,}/.test(element.value)
|| this.test(element, "mobile")===true
|| this.test(element, "email")===true
|| '請填寫用戶名、手機號或者郵箱';
}
},
fields: {
"loginName": "required; loginName",
"password": "required; password"
}
});
instance.mapMsg( obj )
或者 $form.validator( "mapMsg", obj )
用來顯示服務器的驗證消息。(提交表單而且服務器驗證完畢後，返回一個name爲鍵、msg爲value的json傳入此方法中)

@base: 驗證已經初始化

@param: {Object} obj name爲鍵、msg爲值的對象

@example:

$('form').validator('mapMsg', {
username: '用戶名已被使用',
password: '密碼太弱了'
});
instance.showMsg( element, obj )
或者 $form.validator( "showMsg", element, obj )
在一個字段元素上顯示一條消息

@base: 驗證已經初始化

@param: {Element} element 要顯示消息的元素，能夠是jQuery選擇器

@param: {Object} obj 消息的參數

@example:

//給id爲「mobile」的元素顯示一條錯誤消息
$('form').validator('showMsg', '#mobile', {
type: "error",
msg: "手機號已存在"
});
instance.hideMsg( element, obj )
或者 $form.validator( "hideMsg", element, obj )
隱藏一個字段元素上的消息

@base: 驗證已經初始化

@param: {Element} element 要顯示消息的元素，能夠是jQuery選擇器

@param: {Object} obj 消息的參數，可選

@example:

//隱藏id爲「mobile」的的元素的消息
$('form').validator('hideMsg', '#mobile');
instance.setMsg( obj )
或者 $form.validator( "setMsg", obj )
自定義消息，可用來動態改變某個表單驗證的消息（優先於內置、全局、傳參的消息）

@base: 驗證已經初始化

@param: {Object} obj rule名爲鍵、msg爲值的對象

@example:

//動態更改當前實例的錯誤消息
$('form').validator('setMsg', {
username: '用戶名已被使用',
password: '密碼太弱了'
});
instance.setRule( obj )
或者 $form.validator( "setRule", obj )
自定義規則，可用來動態改變某個表單驗證的規則（優先於內置、全局、傳參的規則）

@base: 驗證已經初始化

@param: {Object} obj rule名爲鍵、msg爲值的對象

@example: 如下示例展示了兩種定義規則的方式

//動態更改當前實例的規則
$('form').validator('setRule', {
username: [/^\w{3,12}$/, "請輸入3-12位數字、字母、下劃線"],
password: function(element, params, field){
//do something...
//If verification returns true, otherwise it returns an error message
}
});
instance.setField( key, field )
或者 $form.validator( "setField", key, field )
更新一個字段信息.
若是是新字段就等於添加了一個字段；
若是field===null，而且實例中存在字段key，則會刪除字段key（不驗證key字段）

@base: 驗證已經初始化

@param: {String} key 字段名

@param: {String | Object} field 字段信息

@example:

//動態更改字段name爲「username」的驗證規則
$('form').validator("setField", "username", "用戶名:required;username;");
instance.setField( fields )
或者 $form.validator( "setField", fields )
批量更新字段信息.
若是是新字段就等於添加了一個字段；
若是某個字段的值爲null，而且實例中存在該字段，則會刪除該字段（不驗證該字段）

@base: 驗證已經初始化

@param: {Object} fields 字段信息，參見options中fields的配置

@example:

//批量更改字段的驗證規則
$('form').validator('setField', {
foo: null, //將再也不驗證foo字段
bar: 'required' //更改bar字段的驗證規則
});
$.validator.config( options )
全局配置接口，參見配置參數，以及local文件夾下的配置文件

$.validator.setTheme( options )
設置驗證的主題，參見local文件夾下的配置文件

事件（Events）
validitionv0.7.0+
每次驗證完一個字段，都會觸發該事件，此事件須要綁定在form上面，利用此事件能夠實時監測表單的驗證結果

@example:

$("#form").on("validation", function(e, current){
// 表單所有字段驗證經過則返回 true
// 只要有一個字段驗證不經過就返回 false
// 還沒驗證完，即驗證結果未知的狀況下返回 undefined
console.log(this.isValid);

// 當前正在驗證的字段是否經過
console.log(current.isValid);
})

valid.form
表單驗證成功，同options中valid

@example:

$('#form').on('valid.form', function(e, form){
//do something...
});

invalid.form
表單驗證失敗，同options中invalid

@example:

$('#form').on('invalid.form', function(e, form, errors){
//do something...
});

valid.field
字段驗證成功

@example:

$('input[name="username"]').on('valid.field', function(e, result, me){
//do something...
});

invalid.field
字段驗證失敗

@example:

$('input[name="username"]').on('invalid.field', function(e, result, me){
//do something...
});

valid.rule
字段規則驗證成功

@example:

$('input[name="username"]').on('valid.rule', function(e, ruleName){
//「remote」規則驗證經過時
if (ruleName === 'remote') {
//do something...
}
});

invalid.rule
字段規則驗證失敗

@example:

$('input[name="username"]').on('invalid.rule', function(e, ruleName){
//「remote」規則驗證失敗時
if (ruleName === 'remote') {
//do something...
}
});

$input.trigger("validate");
手動觸發元素進行驗證

@example:

//手動觸發username字段驗證
$('input[name="username"]').trigger("validate");

$form.trigger("validate"); v0.7.0+
手動觸發表單進行驗證，驗證經過後不會自動提交

@example:

//手動觸發表單驗證
$('#form').trigger("validate");

$form.trigger("submit");
手動觸發表單提交，在提交前會自動驗證

@example:

//手動觸發表單提交
$('#form').trigger("submit");

$input.trigger("showtip"); v0.5.0+
觸發元素顯示tip消息

@example:

//驗證初始化完成後，當即顯示全部字段的提示$('#form').validator().trigger("showtip");

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程