jquery.Validation是一款優秀的jquery插件，它能對客戶端表單進行(xíng)驗證，并且提供了許多(duō)可(kě)以定制(zhì)的屬性和(hé)方法，良好的擴展性。在以前做(zuò)過的幾個(gè)項目中，我都用到了Validation，現在結合實際情況，我把項目中經常要用到的驗證整理(lǐ)成一個(gè)實例DEMO，本文就是通(tōng)過講解這個(gè)實例來(lái)理(lǐ)解Validation的應用。

本實例涉及到的驗證有(yǒu)：

用戶名：長度、字符驗證，重複性ajax驗證（是否已存在）。

密碼：長度驗證，重複輸入密碼驗證。

郵件：郵件地址驗證。

固定電(diàn)話(huà)：中國大(dà)陸固定電(diàn)話(huà)号碼驗證。

手機号：中國大(dà)陸手機号碼驗證。

網址：網站(zhàn)URL地址驗證。

日期：标準日期格式驗證。

數(shù)字：整數(shù)、正整數(shù)驗證，數(shù)字範圍驗證。

身份證：大(dà)陸身份證号碼驗證。

郵政編碼：大(dà)陸郵政編碼驗證。

文件：文件類型（後綴）驗證，如隻允許上(shàng)傳圖片。

IP：IP地址驗證。

驗證碼：驗證碼ajax驗證。

使用方法：

1、準備jquery和(hé)jquery.validate插件

2、準備CSS樣式

頁面樣式我不再詳述，大(dà)家(jiā)可(kě)以自己寫個(gè)樣式，也可(kě)以參看DEMO的頁面源代碼。這裏要強調的關鍵樣式是要顯示驗證信息的樣式：

label.error{color:#ea5200; margin-left:4px; padding:0px 20px; 
background:url(images/unchecked.gif) no-repeat 2px 0 }
label.right{margin-left:4px; padding-left:20px; background:
url(images/checked.gif) no-repeat 2px 0}

3、XHTML

	
	

		
		

			
			

				jquery.validation 表單驗證
			

		

		

			
			

				用戶名：
			

			

				
				

					用戶名為(wèi)3-16個(gè)字符，可(kě)以為(wèi)數(shù)字、字母、下劃線以及中文
				

			

		

		

			
			

				密碼：
			

			

				
				

					最小(xiǎo)長度:6 最大(dà)長度:16
				

			

		

		

			
			

				确認密碼：
			

			

				
			

		

	

限于篇幅，本文的隻截取了實例中HTML代碼的一小(xiǎo)部分，詳細XHTML代碼可(kě)參看頁面DEMO源代碼。值得(de)一提的是，我在給了标簽一個(gè)“required”類樣式，下文将會(huì)提到它的作(zuò)用。

4、應用Validation插件

調用Validation插件的方法：

$(function(){	   
	var validate = $("#myform").validate({
         rules:{ //定義驗證規則
            ......
         },
         messages:{ //定義提示信息
            ......
         }
    })
});

rules:定義驗證規則，key:value的形式，key是要驗證的元素,value可(kě)以是字符串或對象。比如驗證用戶名的長度和(hé)不允許為(wèi)空(kōng)：

rules:{
  user:{
      required:true,
	  maxlength:16,
      minlength:3
  },
  ......
}

其實我們在XHTML代碼中可(kě)以直接指定input的class屬性為(wèi)required，作(zuò)用是不允許為(wèi)空(kōng)，這樣在JS部分就不用重複寫了。同樣的驗證email等，直接設置input的class屬性為(wèi)email。

messages:定義提示信息，key:value的形式key是要驗證的元素,值是字符串或函數(shù)，當驗證不通(tōng)過時(shí)提示的信息。

messages:{
  user:{
      required:"用戶名不能為(wèi)空(kōng)！",
      remote:"該用戶名已存在，請(qǐng)換個(gè)其他的用戶名！"
  },
  ......
}

本例中涉及的驗證JS就是按照上(shàng)面的規則進行(xíng)編寫的，Validation插件封裝了好多(duō)基本的驗證方式，如下：

required:true 必須有(yǒu)值，不能為(wèi)空(kōng)

remote:url 可(kě)以用于判斷用戶名等是否已經存在,服務器(qì)端輸出true,表示驗證通(tōng)過

minlength:6 最小(xiǎo)長度為(wèi)6

maxlength:16 最大(dà)長度為(wèi)16

rangelength:長度範圍

range:[10,20] 數(shù)值範圍在10-20之間(jiān)

email:true 驗證郵件

url:true 驗證URL網址

dateISO:true 驗證日期格式'yyyy-mm-dd'

digits:true 隻能為(wèi)數(shù)字

accept:'gif|jpg' 隻接受gif或jpg為(wèi)後綴的圖片。常用于驗證文件的擴展名

equalTo:'#pass' 與哪個(gè)表單字段的值相等，常用于驗證重複輸入密碼

此外，我還(hái)根據項目實際情況擴展了幾個(gè)驗證，驗證的代碼在validate-ex.js，使用前需要先加載這個(gè)JS。它能提供以下驗證：

userName:true 用戶名隻能包括中文字、英文字母、數(shù)字和(hé)下劃線

isMobile:true 手機号碼驗證

isPhone:true 大(dà)陸手機号碼驗證

isZipCode:true 郵政編碼驗證

isIdCardNo:true 大(dà)陸身份證号碼驗證

ip:true IP地址驗證

以上(shàng)提供的驗證方式基本上(shàng)滿足我們在大(dà)多(duō)數(shù)項目中的需求。如果其他特殊驗證需求，可(kě)以擴展，方法如：

jQuery.validator.addMethod("isZipCode", function(value, element) {    
  var zip = /^[0-9]{6}$/;    
  return this.optional(element) || (zip.test(value));    
}, "請(qǐng)正确填寫您的郵政編碼!");

疑難問題解決

1、在項目中遇到在驗證用戶名是否存在時(shí)，發現不支持中文輸入驗證。我的解決辦法是給用戶名進行(xíng)encodeURIComponent編碼，後台PHP再對接受的值進行(xíng)urldecode解碼

user:{
	remote: { 
         url: "chk_user.php", //服務端驗證程序
         type: "post", //提交方式
         data: { user: function() { 
             return encodeURIComponent($("#user").val()); //編碼數(shù)據
         }} 
    } 
},

服務端驗證程序chk_user.php的代碼：

我使用的服務端程序是PHP，您也可(kě)以使用ASP，ASP.NET，JAVA等。此外本例為(wèi)了演示，用戶名數(shù)據是直接寫在服務端的，真正的應用是從數(shù)據庫裏取出的用戶名數(shù)據，來(lái)和(hé)接收客戶端的數(shù)據進行(xíng)對比。

2、在驗證checkbox和(hé)radio控件時(shí)，驗證信息不會(huì)出現在最後的控件文本後面，而是直接跟在第一個(gè)控件的後面，不符合我們的要求。

解決辦法是在validate({})追加以下代碼：

errorPlacement: function(error, element) {
	if ( element.is(":radio") )
		error.appendTo ( element.parent() );
	else if ( element.is(":checkbox") )
		error.appendTo ( element.parent() );
	else if ( element.is("input[name=captcha]") )
		error.appendTo ( element.parent() );
	else
		error.insertAfter(element);
}

3、重置表單。Form表單原始的重置方法是reset自帶

點擊“重置”按鈕，表單元素将會(huì)重置，但(dàn)是再運行(xíng)Validation插件後，驗證的提示信息并沒重置，就是那(nà)些(xiē)提示信息沒有(yǒu)消失。感謝Validation提供了重置表單的方法：resetForm()

$("input:reset").click(function(){
	validate.resetForm();
});

其他

1、本例中還(hái)涉及到驗證碼的判斷方法，也是通(tōng)過異步生(shēng)成驗證碼和(hé)判斷是否輸入正确的，可(kě)以查看源碼,官方網單獨提供了一個(gè)實例：http://jquery.bassistance.de/validate/demo/captcha/

2、更多(duō)驗證方法的應用請(qǐng)查看http://docs.jquery.com/Plugins/Validation