從這節開始，我們開始學習如何在ASP.NET控件中使用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位，顯示界面如下：
?
好了，通過簡單實現登錄用戶驗證功能，大家應該對該插件有一個初步認識，后面的章節，會深入學習該插件。
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
