快捷導(dǎo)航

jQuery Validation實例代碼讓驗證變得如此容易

更新時間：2010年10月18日 00:19:50 作者：

眾所周知，Jquery以其簡潔性讓無數(shù)人為之瘋狂?，F(xiàn)在我要像大家介紹一個jQuery Validation，一看到Validation大家肯定第一直觀感覺就是這肯定是一個驗證框架，沒有錯，本文就是基于jQuery Validation展開討論。

使用客戶端驗證可以有效的減少數(shù)據(jù)往返服務(wù)器和客戶端的次數(shù)，有利于提高服務(wù)器的資源利用路，并且還能夠給用戶直觀，快速的回應(yīng)。在Web 2.0時代，這顯得尤其重要，我想大家一定和我一樣討厭用基礎(chǔ)的javascript寫著煩人的驗證?，F(xiàn)在服務(wù)器端的驗證有比較好的框架可以解決，ASP.NET MVC就可以很好的完成這樣的工作，所以對于.net開發(fā)來說，擁有一個好的客戶端養(yǎng)正框架對于開發(fā)效率的提高起著至關(guān)重要的作用。

我們可以通過下面的地址獲得這個JS框架

JQuery
jQuery Validation Framework

讓我們以一個簡單的實例來開始我們對于jQuery Validation Framework的認識吧

首先，我們需要加入對上面兩個JS文件的引用

復(fù)制代碼代碼如下:

 
<head runat="server"> 
<title>Untitled Page</title> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.validate.js" type="text/javascript"></script> 
</head> 

接下來，聲明下面的HTML段

復(fù)制代碼代碼如下:

 
<form id="customerForm" runat="server"> 
<div> 
First Name: <input type="text" id="FirstName" class="required" name="FirstName" /> 
Last Name: <input type="text" id="LastName" class="required" name="LastName" /> 

<input type="submit" value="Register" /> 
</div> 
</form> 

通過以上代碼，大家會發(fā)現(xiàn)我們對于每一個input都加上了class="required" 他的作用就是在這個inpute標(biāo)簽為空時會提示用戶出錯。
最后我們要為我們的框架找到一個切入點，通常，我們可以把下段代碼放到HTML的最后

復(fù)制代碼代碼如下:

 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() 
{ 
$("#customerForm").validate(); 
}); 
</script> 

運行看看效果如何

下面請看一個大一點的例子為ListBox Control創(chuàng)建常規(guī)的驗證
我們可以這樣添加規(guī)則

復(fù)制代碼代碼如下:

 
$("#customerForm").validate( 
{ 
rules: 
{ 
FirstName: { required:true }, 
LastName: { required:true }, 
Countries: { validateCountries:true } 
}, 
messages: 
{ 
FirstName: { required: "First Name is required" }, 
LastName: { required: "Last Name is required" }, 
Countries: { validateCountries:"Please select at least 2 items from the Countries" } 
}, 

}); 
// add the validate countries method 
jQuery.validator.addMethod("validateCountries", function(value, element) 
{ 
var noOfSelectedCountries = $("#Countries :selected").length; 
if(noOfSelectedCountries < 2) return false; 
return true; 
}); 

為錯誤提供錯誤信息

復(fù)制代碼代碼如下:

 
$("#customerForm").validate( 
{ 
rules: 
{ 
FirstName: { required:true }, 
LastName: { required:true }, 
Countries: { validateCountries:true } 
}, 

messages: 
{ 
FirstName: { required: "First Name is required" }, 
LastName: { required: "Last Name is required" }, 
Countries: { validateCountries:"Please select at least 2 items from the Countries" } 
}, 

errorContainer:"#errors", 
errorLabelContainer:"#errors ul", 
wrapper:"li" 

}); 