快捷導(dǎo)航

ASP.NET jQuery 實(shí)例11 通過(guò)使用jQuery validation插件簡(jiǎn)單實(shí)現(xiàn)用戶(hù)登錄頁(yè)面驗(yàn)證功能

更新時(shí)間：2012年02月03日 17:04:49 作者：

從這節(jié)開(kāi)始，我們開(kāi)始學(xué)習(xí)如何在A(yíng)SP.NET控件中使用jQuery validation 插件，首先要用它，必須先了解它有什么用

簡(jiǎn)單來(lái)說(shuō)，jQuery validation插件就是來(lái)校驗(yàn)表單form里面元素輸入的內(nèi)容是否滿(mǎn)足業(yè)務(wù)規(guī)則，如果不滿(mǎn)足，可以給出用戶(hù)自定義的提示信息。該插件不僅默認(rèn)有一些校驗(yàn)規(guī)則，如校驗(yàn)內(nèi)容是否為空，內(nèi)容的長(zhǎng)度是否符合給定的值，還可以根據(jù)用戶(hù)自定義業(yè)務(wù)規(guī)則，而且錯(cuò)誤提示信息，也可以根據(jù)用戶(hù)的要求自定義顯示?？磥?lái)這個(gè)插件的功能確實(shí)很強(qiáng)大，是不是迫不及待想使用了。好的，那我們就開(kāi)始簡(jiǎn)介如何使用它。
jQuery validation 插件下載地址：http://plugins.jquery.com/project/validate
為了使用這個(gè)插件，我們要在form元素上使用方法validate({options});
讓我們先快速瀏覽下插件經(jīng)常要用到的options：
•rules:由key/value組成，key等于表單元素ID而value表示表單元素內(nèi)容需要滿(mǎn)足的業(yè)務(wù)規(guī)則。
•messages:由key/value組成，key等于表單元素ID而value表示表單元素內(nèi)容不滿(mǎn)足某種業(yè)務(wù)規(guī)則而需要顯示的內(nèi)容。
•errorLabelContainer:指定頁(yè)面已經(jīng)定義的一個(gè)容器元素，用來(lái)放錯(cuò)誤信息。
•errorContainer:在errorLabelContainer內(nèi)表示一個(gè)主要的內(nèi)容區(qū)域。
•wrapper:表示在errorLabelContainer元素里面定義一個(gè)元素來(lái)包裝錯(cuò)誤信息。
•onsubmit:在表單提交前做驗(yàn)證，能設(shè)置為false通過(guò)添加其他事件來(lái)驗(yàn)證。
•highlight:高亮顯示輸入無(wú)效的內(nèi)容區(qū)域。
•unhighlight:恢復(fù)原來(lái)被高亮顯示的區(qū)域。
--------------------------------------------------------------------------------
現(xiàn)在我們開(kāi)始通過(guò)使用jQuery validation插件簡(jiǎn)單實(shí)現(xiàn)用戶(hù)登錄頁(yè)面驗(yàn)證功能：
1.引入插件：

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

 
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>后加入界面 

2.添加樣式：

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

 
<style type="text/css"> 
.header 
{ 
background-color: #CCCCCC; 
color: White; 
font-weight: bolder; 
text-align: center; 
} 
.content 
{ 
font-weight: bold; 
border: 1px solid #CCCCCC; 
} 
.alertmsg 
{ 
color: Red; 
} 
.alertmsg li 
{ 
margin-top: 3px; 
margin-bottom: 3px; 
} 
</style> 

3.界面代碼：

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

 
<form id="form1" runat="server"> 
<div align="center"> 
<table cellpadding="3" cellspacing="3" border="0" class="content"> 
<tr> 
<td colspan="2" class="header"> 
登錄用戶(hù) 
</td> 
</tr> 
<tr> 
<td align="right"> 
<asp:Label ID="lblUserName" runat="server" Text="用戶(hù)名： "></asp:Label> 
</td> 
<td align="left"> 
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td align="right"> 
<asp:Label ID="lblPassword" runat="server" Text="密碼： "></asp:Label> 
</td> 
<td align="left"> 
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox> 
</td> 
</tr> 
<tr> 
<td align="center" colspan="2"> 
<asp:Button ID="btnSubmit" runat="server" Text="提交" />&nbsp;<asp:Button ID="btnReset" 
runat="server" Text="重置" /> 
</td> 
</tr> 
</table> 
</div> 
<div align="center" class="alertmsg"> 
</div> 
</form> 

4.腳本代碼：

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

 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#form1").validate({ 
rules: { txtUserName: "required", 
txtPassword: { required: true, minlength: 8 } 
}, 
messages: { txtUserName: "請(qǐng)輸入您的姓名", 
txtPassword: { required: "請(qǐng)輸入您的密碼", minlength: "密碼長(zhǎng)度必須大于8" } 
}, 
wrapper: "li", // 提示信息按列表包裝顯示 
errorLabelContainer: $("#form1 div.alertmsg") // 提示信息放入指定的元素內(nèi) 
}); 
$("#btnReset").click(function (e) { 
e.preventDefault(); 
$("#txtUserName").val(""); 
$("#txtPassword").val(""); 
}); 
}); 
</script> 