從這節開始,我們開始學習如何在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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
