jQuery插件——Validation Plugin表單驗證

jQuery表單驗證插件：https://plugins. jquery.com/tag/validate/

 

jQuery Validation插件是最經常使用的插件之一: http://jqueryvalidation.org/

 

1、基本API

 

rules裏面的「username」是input中的「name」，不是「id」。

表單驗證，主要是倆：一是規則，二是提示信息

 

當在使用validate插件的時候:

使用validate()方法的時候將debug設置爲true,那麼表單不會提交,只進行檢查,調試時比較方便

 

validate（）方法是validate插件中 的核心方法<br>

基本的驗證方法有required：true, 必填 remote:"url地址" 去該地址遠程校驗 minlength 最小長度 maxlength 最大長度 rangelength 長度範圍 min最小值 max最大值 range值範圍 email Email格式 url URL格式 date 日期 dateISO ISO日期 number 數字 digits 整數 equalTo 與另外一個元素值相等

 

配置項 remote 遠程校驗 -- 可用於發送數據到服務器進行校驗

-- 能夠是 get請求 即 remote :url 即可發送當前信息至該url進而獲取信息      -- 也能夠是 post請求 即 remote : {url: url,type: .., data :所要發送的信息} 即發送當前信息以及data中的信息至 url

 

2、基本API（2）

 

rangelength長度範圍：是以數組的方式。例如[2,10]

min和minlength的區別：叫length表明是長度，不加length表明的是它的值，也就是值的範圍要注意。

 

設置：email,url,date,dateISO:true

url：校驗要加http://或https://

dateISO： yyyy-mm-dd 或 yyyy/mm/dd格式

 

number:true 提示輸入必須爲數字

digits:true 提示輸入必須爲非負整數

equalto:"#password" 密碼確認

好比確認密碼的製做equalTo:"選擇器"(密碼校驗)  「#password"

 

3、高級API

 

△rules()方法

(只針對表單裏的元素，而不是某個整個表單)

1.可使用rules("add",{})的方法來爲元素添加規則，如:

$("#username").rules("add",{minlength:2,maxlength:10})

2.可使用rules("remove",{})的方法來爲元素去掉規則，如：

$("#username").rules("remove","email")

 

使用valid方法能夠來實現對錶單的檢查:

$("#bt1").bind("click",function(){

alert($("#demoForm").valid()?"填寫正確":"填寫錯誤");

})

 

validator對象方法

validate方法返回Validator對象，validator對象有不少有用的方法：

validator.form()驗證表單是否有效，返回TRUE/false

validator.element(element)驗證某個元素是否有效，返回TRUE/false

validator.resetform()把表單恢復到驗證前原來的狀態

validator.showErrors(errors)針對某個元素顯示特定的錯誤信息（自定義校驗中可使用）

validator.numberOfInvalids()返回無效的元素數量（正確返回0）

 

validator對象靜態方法，能夠直接使用

$.validator.addMethod(name,method[,message])增長自定義的驗證方法

$.validator.format(template,argument,argumentN...)格式化字符串，用參數代替模板中的{n}

$.validator.setDefaults(options)修改插件默認設置

$.validator.addClassRules(name,rules)爲包含class屬性名批量增長驗證類型

 

validate()方法配置項

validate()方法配置項是validate插件的核心內容

 

submitHandler經過驗證後運行的函數，能夠加上表單提交方法

invalidHandler無效表單提交後運行的函數

ignore對某些元素不進行驗證

rules定義校驗規則

messages定義提示信息

groups對一組元素的驗證，用一個錯誤提示，用errorPlacement控制把出錯信息放在那實例調用：

submitHandler:function(from){

//表單提交的方式

from:submit();//$(form).Ajax.submit();//$ajax等方式提交表單

}

 

invalidHandler:function(event,validator){ //event:無效驗證觸發的事件 //validator:對象

 

}也能夠寫一個事件來觸發

$("選擇器屬性值").on("事件名",function(event,validator)){

 

});

 

ignore:"#hh" 對類hh不進行校驗

 

每一個rules的配置方法都有一個默認depends：function（element）{條件}，表示當函數知足條件時，纔開始檢驗該配置方法<br>

當配置方法有參數時可爲該方法添加參數param：x，當depends中函數知足條件時才傳入參數進行配置

 

groups:{login:"username password confirm-password"} //對一組元素進行驗證

errorPlacement:function(error,element){ //對一組元素驗證後錯誤信息顯示

error.insertBefore("#info");

}

 

validate()方法配製項

onsubmit是否在提交時驗證

onfocusout是否在獲取焦點時驗證

onkeyup是否在敲擊鍵盤時驗證

onclick是否在鼠標點擊時驗證，通常用於checkbox或者radio

focusInvalid提交表單後，未經過驗證的表單（第一個或提交以前得到焦點的未經過驗證的表單）是否會獲

得焦點

focusCleanup當未經過驗證的元素得到焦點時，是否移除錯誤提示

errorClass指定錯誤提示的css類名，默認爲error,能夠自定義錯誤提示的樣式，固然類名也能夠自定義設置

validClass指定驗證經過的css類名 道理同上

errorElement使用什麼標籤標記錯誤 （如用<li>標記）

wrapper使用什麼標籤把上邊的errorElement包起來 （如用<ul>包裹）

errorLabelContainer把錯誤信息統一防在一個容器裏面 （如放在類或id選擇器中）

errorContainer顯示或者隱藏驗證信息，能夠自動實現由錯誤信息出現時把容器屬性變爲顯示，無錯誤時隱藏（通常同時使用和上面3個或上面3個同時使用）

 

showError能夠顯示總共有多少個未經過驗證的元素

showErrors:function(errorMap,errorList){

能夠添加自定義錯誤方式

this.defaultShowErrors();//系統默認的錯誤信息展現方式

}

errorMap,errorList區別：list比map更詳細，map能夠直接自定義信息，list能夠用來分析錯誤信息

 

errorPlacement自定義錯誤信息放到哪裏

success要驗證的元素經過驗證後的動做（主要針對的是label元素）

 

highlight能夠給未經過驗證的元素加效果（主要針對表單t元素）

unhighlight去除未經過驗證的元素的效果，通常和highlight同時使用

 

選擇器擴展：
:blank 選擇全部值爲空的元素
:filled 選擇全部值不爲空的元素
:unchecked 選擇全部沒有被選中的元素

 

4、 自定義驗證方法

 

$.validator.addMethod(name,.method[,message])

name:方法名稱

method:function(value,element,params)方法邏輯

message:提示消息

this.optional(element)意思填寫值了纔會驗證，加上這個以後最好設置require，不然這個驗證不會被執行

 

additional-methods.js包含了不少擴展驗證方法。在寫自定義方法時能夠參考這個js庫

 

全部提交的表單數據，都必須驗證2次，提交前的客戶端驗證，提交後在服務器端再次進行驗證，保證數據的合法性。

 

服務器端不要相信任何從客戶端傳過來的數據。