欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery Validation實(shí)例代碼 讓驗(yàn)證變得如此容易

 更新時(shí)間:2010年10月18日 00:19:50   作者:  
眾所周知,Jquery以其簡(jiǎn)潔性讓無(wú)數(shù)人為之瘋狂?,F(xiàn)在我要像大家介紹一個(gè)jQuery Validation,一看到Validation大家肯定第一直觀感覺(jué)就是這肯定是一個(gè)驗(yàn)證框架,沒(méi)有錯(cuò),本文就是基于jQuery Validation展開(kāi)討論。

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

我們可以通過(guò)下面的地址獲得這個(gè)JS框架

 讓我們以一個(gè)簡(jiǎn)單的實(shí)例來(lái)開(kāi)始我們對(duì)于jQuery Validation Framework的認(rèn)識(shí)吧

 首先,我們需要加入對(duì)上面兩個(gè)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>

接下來(lái),聲明下面的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>

通過(guò)以上代碼,大家會(huì)發(fā)現(xiàn)我們對(duì)于每一個(gè)input都加上了class="required" 他的作用就是在這個(gè)inpute標(biāo)簽為空時(shí)會(huì)提示用戶出錯(cuò)。
最后我們要為我們的框架找到一個(gè)切入點(diǎn),通常,我們可以把下段代碼放到HTML的最后
復(fù)制代碼 代碼如下:

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

運(yùn)行看看效果如何
 
下面請(qǐng)看一個(gè)大一點(diǎn)的例子 為L(zhǎng)istBox Control創(chuàng)建常規(guī)的驗(yàn)證
我們可以這樣添加規(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;
});


為錯(cuò)誤提供錯(cuò)誤信息
復(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"

});

效果見(jiàn)下圖

 

 好了 不多說(shuō)了   本文提供源代碼下載  自己研究吧  很晚了
源代碼下載 http://xiazai.jb51.net/201010/yuanma/jQueryValidation_Demo_Download.rar

相關(guān)文章

最新評(píng)論