在這節(jié)我們將使用validation插件實(shí)現(xiàn)注冊(cè)頁(yè)面的驗(yàn)證功能,通過(guò)這個(gè)例子,可以更全面的掌握該插件的使用功能。
頁(yè)面樣式代碼:
< style type ="text/css" >
.header
{
background-color : #CCCCCC ;
color : White ;
font-size : x-large ;
}
.content
{
background-color : White ;
font-weight : lighter ;
font-size : small ;
}
.content td
{
text-align : left ;
}
.mandatory
{
color : Red ;
}
.errorContainer
{
display : none ;
margin-bottom : 20px ;
}
.alertMsg
{
margin-left : 20px ;
color : #660000 ;
}
.input-highlight
{
background-color : #CCCCCC ;
}
</ style >
頁(yè)面結(jié)構(gòu)代碼:
< form id ="form1" runat ="server" >
< div align ="center" >
< div align ="center" class ="errorContainer" >
< fieldset style ="width: 550px;" >
< p align ="left" class ="alertMsg" >
這里有一些錯(cuò)誤注冊(cè)提示信息,根據(jù)提示請(qǐng)核實(shí)您注冊(cè)信息格式是否正確:
</ p >
</ fieldset >
</ div >
< fieldset style ="width: 350px; height: 400px" >
< table cellpadding ="3" cellspacing ="3" border ="0" class ="content" >
< tr >
< td colspan ="2" class ="header" style ="text-align: center;" >
注冊(cè)用戶
</ td >
</ tr >
< tr >
< td >
用戶名 < span class ="mandatory" > * </ span >
</ td >
< td >
< asp:TextBox ID ="txtName" runat ="server" ></ asp:TextBox >
</ td >
</ tr >
< tr >
< td >
Email < span class ="mandatory" > * </ span >
</ td >
< td >
< asp:TextBox ID ="txtEmail" runat ="server" ></ asp:TextBox >
</ td >
</ tr >
< tr >
< td >
密碼 < span class ="mandatory" > * </ span >
</ td >
< td >
< asp:TextBox ID ="txtPassword" runat ="server" TextMode ="Password" ></ asp:TextBox >
</ td >
</ tr >
< tr >
< td >
確認(rèn)密碼 < span class ="mandatory" > * </ span >
</ td >
< td >
< asp:TextBox ID ="txtConfirmPwd" runat ="server" TextMode ="Password" ></ asp:TextBox >
</ td >
</ tr >
< tr >
< td >
生日 < span class ="mandatory" > * </ span >
</ td >
< td >
< asp:TextBox ID ="txtDOB" runat ="server" ></ asp:TextBox >
</ td >
</ tr >
< tr >
< td >
地址1 < span class ="mandatory" > * </ span >
</ td >
< td >
< asp:TextBox ID ="txtAddress1" runat ="server" ></ asp:TextBox >
</ td >
</ tr >
< tr >
< td >
地址2
</ td >
< td >
< asp:TextBox ID ="txtAddress2" runat ="server" ></ asp:TextBox >
</ td >
</ tr >
< tr >
< td >
郵政編號(hào) < span class ="mandatory" > * </ span >
</ td >
< td >
< asp:TextBox ID ="txtPostal" runat ="server" ></ asp:TextBox >
</ td >
</ tr >
< tr >
< td >
網(wǎng)站
</ td >
< td >
< asp:TextBox ID ="txtWebsite" runat ="server" ></ asp:TextBox >
</ td >
</ tr >
< tr >
< td colspan ="2" >
< asp:CheckBox ID ="chkTandC" runat ="server" /> 我接受相關(guān)法律條款
</ td >
</ tr >
< tr >
< td colspan ="2" style ="text-align: center;" >
< asp:Button ID ="btnSubmit" Text ="提交" runat ="server" /> < asp:Button ID ="btnReset"
Text ="重置" runat ="server" />
</ td >
</ tr >
</ table >
</ fieldset >
</ div >
</ form >
腳本代碼:
先引入腳本文件:
< script src ="Scripts/jquery-1.4.1-vsdoc.js" type ="text/javascript" ></ script >
< script src ="Scripts/jquery.validate.js" type ="text/javascript" ></ script >
< script src ="Scripts/jquery.form.js" type ="text/javascript" ></ script >
腳本功能代碼:
< script type ="text/javascript" >
$(document).ready( function () {
// 在這里設(shè)置默認(rèn)的操作行為
$.validator.setDefaults({
highlight: function (input) {
$(input).addClass( " input-highlight " );
},
unhighlight: function (input) {
$(input).removeClass( " input-highlight " );
}
});
// 然后調(diào)用函數(shù)validate()開始對(duì)form校驗(yàn)
$( " #form1 " ).validate({
rules: { txtName: " required " ,
// 驗(yàn)證郵件格式是否正確,設(shè)置email屬性為true
txtEmail: { required: true , email: true },
txtPassword: { required: true , minlength: 8 },
// 在這里equalTo屬性的作用是驗(yàn)證確認(rèn)密碼必須和之前輸入的密碼相等
txtConfirmPwd: { required: true , minlength: 8 , equalTo: " #txtPassword " },
// 驗(yàn)證日期格式是否正確,設(shè)置date屬性為true;
txtDOB: { required: true , date: true },
// 通過(guò)屬性maxlength設(shè)置文本最大長(zhǎng)度
txtAddress1: { required: true , maxlength: 200 },
txtAddress2: { maxlength: 200 },
// digits屬性設(shè)置輸入的內(nèi)容必須為數(shù)字
txtPostal: { required: true , digits: true },
// url屬性驗(yàn)證是否輸入為合法的網(wǎng)址
txtWebsite: { url: true },
chkTandC: " required "
},
messages: { txtName: " 請(qǐng)輸入您的姓名 " ,
txtEmail: { required: " 請(qǐng)輸入您的Email " ,
email: " 請(qǐng)輸入一個(gè)合法的email地址 "
},
txtPassword: { required: " 請(qǐng)輸入您的密碼 " ,
minlength: " 密碼長(zhǎng)度必須大于8 "
},
txtConfirmPwd: { required: " 請(qǐng)輸入您的確認(rèn)密碼 " ,
minlength: " 確認(rèn)的密碼長(zhǎng)度必須大于8 " ,
equalTo: " 請(qǐng)保證輸入的密碼和確認(rèn)的密碼要一樣 "
},
txtDOB: { required: " 請(qǐng)輸入您的生日 " ,
date: " 您輸入的生日日期格式不對(duì) "
},
txtAddress1: { required: " 請(qǐng)輸入您的地址1 " ,
maxlength: " 您輸入的地址1長(zhǎng)度不能超過(guò)200 "
},
txtAddress2: { maxlength: " 您輸入的地址1長(zhǎng)度不能超過(guò)200 " },
txtPostal: { required: " 請(qǐng)輸入您的郵政編號(hào) " ,
digits: " 您輸入的郵政編號(hào)必須都為數(shù)字 "
},
txtWebsite: { url: " 請(qǐng)輸入一個(gè)合法的網(wǎng)址 " },
chkTandC: { required: " 請(qǐng)接受相關(guān)法律條款 " }
},
wrapper: " li " ,
errorContainer: $( " div.errorContainer " ),
errorLabelContainer: $( " #form1 p.alertMsg " )
});
$( " #btnReset " ).click( function (e) {
e.preventDefault();
// 這里使用了插件form的resetForm()函數(shù),恢復(fù)到第一次加載頁(yè)面的狀態(tài)
$( " #form1 " ).resetForm();
});
});
</ script >
注意:樣式選擇器div.errorContainer和div .errorContainer的含義不一樣,第一個(gè)是選擇所有帶樣式類errorContainer的div元素,而第二個(gè)是選擇div元素里面的后代所有帶樣式類errorContainer的元素。
最終效果圖:
ASP.NET jQuery 食譜12 (通過(guò)使用jQuery validation插件簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)頁(yè)面驗(yàn)證功能)
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
