jquery.Validation是一款優秀的jquery插件,它能對客戶端表單進行驗證,並且提供了許多可以自訂的屬性和方法,良好的擴充性。現在結合實際情況,我把專案中常要用到的驗證整理成一個實例DEMO,本文就是透過講解這個實例來理解Validation的應用。
本實例涉及的驗證有:
使用者名稱:長度、字元驗證,重複性ajax驗證(是否已存在)。
密碼:長度驗證,重複輸入密碼驗證。
郵件:郵件地址驗證。
固定電話:中國大陸固定電話號碼驗證。
手機號碼:中國大陸手機號碼驗證。
網址:網站URL地址驗證。
日期:標準日期格式驗證。
數字:整數、正整數驗證,數字範圍驗證。
身分證:大陸身分證號碼驗證。
郵遞區號:大陸郵遞區號驗證。
文件:文件類型(後綴)驗證,如只允許上傳圖片。
IP:IP位址驗證。
驗證碼:驗證碼ajax驗證。
使用方法:
1、準備jquery和jquery.validate外掛程式
1 2 |
|
2、準備CSS樣式
頁面樣式我不再詳述,大家可以自己寫個樣式,也可以參考DEMO的頁面原始碼。這裡要強調的關鍵樣式是要顯示驗證資訊的樣式:
1 2 3 4 |
|
3、XHTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
值得一提的是,我在給了標籤一個「required」類別樣式,下文將會提到它的作用。
4.應用Validation外掛程式
呼叫Validation插件的方法:
1 2 3 4 5 6 7 8 9 10 |
|
rules:定義驗證規則,key:value的形式,key是要驗證的元素,value可以是字串或物件。例如驗證使用者名稱的長度和不允許為空:
1 2 3 4 5 6 7 8 |
|
其實我們在XHTML程式碼中可以直接指定input的class屬性為required,作用是不允許為空,這樣在JS部分就不用重複寫了。同樣的驗證email等,直接設定input的class屬性為email。
messages:定義提示訊息,key:value的形式key是要驗證的元素,值是字串或函數,當驗證不通過時提示的資訊。
1 2 3 4 5 6 7 |
|
本例中涉及的驗證JS就是按照上面的規則進行編寫的,Validation插件封裝了很多基本的驗證方式,如下:
required:true 必須有值,不能為空
remote:url 可以用來判斷使用者名稱等是否已經存在,伺服器端輸出true,表示驗證通過
minlength:6 最小長度為6
maxlength:16 最大長度為16
rangelength:長度範圍
range:[10,20] 數值範圍在10-20之間
email:true 驗證郵件
url:true 驗證網址
dateISO:true 驗證日期格式'yyyy-mm-dd'
digits:true 只能為數字
accept:'gif|jpg' 只接受gif或jpg為字尾的圖片。常用於驗證檔案的副檔名
equalTo:'#pass' 與哪個表單欄位的值相等,常用於驗證重複輸入密碼
此外,我還根據專案實際情況擴展了幾個驗證,驗證的程式碼在validate-ex.js,使用前需要先載入這個JS。它能提供以下驗證:
userName:true 使用者名稱只能包含中文、英文字母、數字和底線
isMobile:true 手機號碼驗證
isPhone:true 大陸手機號碼驗證
isZipCode:true 郵遞區號驗證
isIdCardNo:true 大陸身分證號碼驗證
ip:true IP位址驗證
以上提供的驗證方式基本上滿足我們在大多數專案中的需求。如果其他特殊驗證需求,可以擴展,方法如:
1 2 3 4 |
|
疑難問題解決:
1、在專案中遇到在驗證使用者名稱是否存在時,發現不支援中文輸入驗證。我的解決方法是給用戶名進行encodeURIComponent編碼,後台PHP再對接受的值進行urldecode解碼
1 2 3 4 5 6 7 8 9 |
|
服務端驗證程式chk_user.php的程式碼:
1 2 3 4 5 6 7 8 9 10 11 |
|
我使用的服务端程序是PHP,您也可以使用ASP,ASP.NET,JAVA等。此外本例为了演示,用户名数据是直接写在服务端的,真正的应用是从数据库里取出的用户名数据,来和接收客户端的数据进行对比。
2、在验证checkbox和radio控件时,验证信息不会出现在最后的控件文本后面,而是直接跟在第一个控件的后面,不符合我们的要求。
解决办法是在validate({})追加以下代码:
1 2 3 4 5 6 7 8 9 10 |
|
3、重置表单。Form表单原始的重置方法是reset自带
1 |
|
点击“重置”按钮,表单元素将会重置,但是再运行Validation插件后,验证的提示信息并没重置,就是那些提示信息没有消失。感谢Validation提供了重置表单的方法:resetForm()
1 2 3 |
|