ASP.NET jQuery 執行個體11 通過使用jQuery validation外掛程式簡單實現使用者登入頁面驗證功能

簡單來說，jQuery validation外掛程式就是來校正表單form裡面元素輸入的內容是否滿足商務規則，如果不滿足，可以給出使用者自訂的提示資訊。該外掛程式不僅預設有一些校正規則，如校正內容是否為空白，內容的長度是否符合給定的值，還可以根據使用者自訂商務規則，而且錯誤提示資訊，也可以根據使用者的要求自訂顯示。看來這個外掛程式的功能確實很強大，是不是迫不及待想使用了。好的，那我們就開始簡介如何使用它。
jQuery validation 外掛程式：http://plugins.jquery.com/project/validate
為了使用這個外掛程式，我們要在form元素上使用方法validate({options});
讓我們先快速探索下外掛程式經常要用到的options：
•rules:由key/value組成，key等於表單元素ID而value表示表單元素內容需要滿足的商務規則。
•messages:由key/value組成，key等於表單元素ID而value表示表單元素內容不滿足某種商務規則而需要顯示的內容。
•errorLabelContainer:指定頁面已經定義的一個容器元素，用來放錯誤資訊。
•errorContainer:在errorLabelContainer內表示一個主要的內容地區。
•wrapper:表示在errorLabelContainer元素裡面定義一個元素來封裝錯誤資訊。
•onsubmit:在表單提交前做驗證，能設定為false通過添加其他事件來驗證。
•highlight:高亮顯示輸入無效的內容地區。
•unhighlight:恢複原來被高亮顯示的地區。
--------------------------------------------------------------------------------
現在我們開始通過使用jQuery validation外掛程式簡單實現使用者登入頁面驗證功能：
1.引入外掛程式： 複製代碼 代碼如下:<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>後加入介面

2.添加樣式： 複製代碼 代碼如下:<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.介面代碼： 複製代碼 代碼如下:<form id="form1" runat="server">
<div align="center">
<table cellpadding="3" cellspacing="3" border="0" class="content">
<tr>
<td colspan="2" class="header">
登入使用者
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="lblUserName" runat="server" Text="使用者名稱： "></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="提交" /> <asp:Button ID="btnReset"
runat="server" Text="重設" />
</td>
</tr>
</table>
</div>
<div align="center" class="alertmsg">
</div>
</form>

4.指令碼代碼： 複製代碼 代碼如下:<script type="text/javascript">
$(document).ready(function () {
$("#form1").validate({
rules: { txtUserName: "required",
txtPassword: { required: true, minlength: 8 }
},
messages: { txtUserName: "請輸入您的姓名",
txtPassword: { required: "請輸入您的密碼", minlength: "密碼長度必須大於8" }
},
wrapper: "li", // 提示資訊按列表封裝顯示
errorLabelContainer: $("#form1 div.alertmsg") // 提示資訊放入指定的元素內
});
$("#btnReset").click(function (e) {
e.preventDefault();
$("#txtUserName").val("");
$("#txtPassword").val("");
});
});
</script>

5.使用者名稱和密碼不輸入，直接提交，顯示介面如下：

現在已經輸入使用者名稱和密碼，密碼長度輸入4位，顯示介面如下：

好了，通過簡單實現登入使用者驗證功能，大家應該對該外掛程式有一個初步認識，後面的章節，會深入學習該外掛程式。