nice Validator參考

兩個字段匹配

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

規則：match[name];

Preview

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

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

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方式為GET

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 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 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 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>

</ 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 class= "form-item">

< div class= "field-name">電子郵件地址</ div>

< div class= "field-input">

< input type= "text" name= "user[email]" autocomplete= "off">

</ div>

< div class= "form-item">

< div class= "field-name">創建密碼</ div>

< div class= "field-input">

< input type= "password" name= "user[user_password]">

</ 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>

</ 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>

< 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. 統一顯示消息在一個位置

1、設置 msgMaker 參數為false，就不會再自動生成消息
2、使用 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. 如果多個字段有關聯性的時候，例如：每驗證其中一個字段就需要做一下處理

例1、組合多個字段，至少正確填寫其中任意一個字段，並且其他字段無錯則通過

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 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 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 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>

</ 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 以上版本。

通過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]")
注意：
1、因為該方法有返回布爾值，所以只能通過實例的方式調用
2、該方法無法測試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");

快速上手

例1. DOM傳參

Preview

HTML

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

Preview

HTML

Javascript

例3. 設置顯示替換名

Preview

HTML

數值范圍

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

Preview

HTML

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

Preview

HTML

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

Preview

HTML

checkbox 和 radio的驗證

例1. radio的必選

Preview

HTML

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

Preview

HTML

例3. 控制選中項目數

Preview

HTML

例4. Ajax提交表單

Preview

HTML

Javascript

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

Preview

HTML

兩個字段匹配

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

Preview

HTML

例2. 兩個字段比較大小

Preview

HTML

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

Preview

HTML

字符串長度

例1. 限制字符長度范圍

Preview

HTML

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

Preview

HTML

遠程驗證

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

Preview

HTML

Javascript

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

Preview

HTML

Javascript

例3. 自定義ajax驗證

Preview

HTML

Javascript

過濾不安全字符

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

Preview

HTML

Twitter注冊之DOM傳參

Preview

HTML

Javascript

Twitter注冊之js傳參

Preview

HTML