ASP.NET jQuery 實例12 通過使用jQuery validation插件簡單實現(xiàn)用戶注冊頁面驗證功能

更新時間：2012年02月03日 17:08:19 作者：

在這節(jié)我們將使用validation插件實現(xiàn)注冊頁面的驗證功能，通過這個例子，可以更全面的掌握該插件的使用功能

頁面樣式代碼：

 
<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> 

頁面結(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"> 
這里有一些錯誤注冊提示信息，根據(jù)提示請核實您注冊信息格式是否正確： 
</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;"> 
注冊用戶 
</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> 
確認密碼<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> 
郵政編號<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" />我接受相關法律條款 
</td> 
</tr> 
<tr> 
<td colspan="2" style="text-align: center;"> 
<asp:Button ID="btnSubmit" Text="提交" runat="server" />&nbsp;<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 () { 
// 在這里設置默認的操作行為 
$.validator.setDefaults({ 
highlight: function (input) { 
$(input).addClass("input-highlight"); 
}, 
unhighlight: function (input) { 
$(input).removeClass("input-highlight"); 
} 
}); 

// 然后調(diào)用函數(shù)validate()開始對form校驗 
$("#form1").validate({ 
rules: { txtName: "required", 
// 驗證郵件格式是否正確，設置email屬性為true 
txtEmail: { required: true, email: true }, 
txtPassword: { required: true, minlength: 8 }, 
// 在這里equalTo屬性的作用是驗證確認密碼必須和之前輸入的密碼相等 
txtConfirmPwd: { required: true, minlength: 8, equalTo: "#txtPassword" }, 
// 驗證日期格式是否正確，設置date屬性為true; 
txtDOB: { required: true, date: true }, 
// 通過屬性maxlength設置文本最大長度 
txtAddress1: { required: true, maxlength: 200 }, 
txtAddress2: { maxlength: 200 }, 
// digits屬性設置輸入的內(nèi)容必須為數(shù)字 
txtPostal: { required: true, digits: true }, 
// url屬性驗證是否輸入為合法的網(wǎng)址 
txtWebsite: { url: true }, 
chkTandC: "required" 
}, 
messages: { txtName: "請輸入您的姓名", 
txtEmail: { required: "請輸入您的Email", 
email: "請輸入一個合法的email地址" 
}, 
txtPassword: { required: "請輸入您的密碼", 
minlength: "密碼長度必須大于8" 
}, 
txtConfirmPwd: { required: "請輸入您的確認密碼", 
minlength: "確認的密碼長度必須大于8", 
equalTo: "請保證輸入的密碼和確認的密碼要一樣" 
}, 
txtDOB: { required: "請輸入您的生日", 
date: "您輸入的生日日期格式不對" 
}, 
txtAddress1: { required: "請輸入您的地址1", 
maxlength: "您輸入的地址1長度不能超過200" 
}, 
txtAddress2: { maxlength: "您輸入的地址1長度不能超過200" }, 
txtPostal: { required: "請輸入您的郵政編號", 
digits: "您輸入的郵政編號必須都為數(shù)字" 
}, 
txtWebsite: { url: "請輸入一個合法的網(wǎng)址" }, 
chkTandC: { required: "請接受相關法律條款" } 
}, 
wrapper: "li", 
errorContainer: $("div.errorContainer"), 
errorLabelContainer: $("#form1 p.alertMsg") 
}); 

$("#btnReset").click(function (e) { 
e.preventDefault(); 
// 這里使用了插件form的resetForm()函數(shù)，恢復到第一次加載頁面的狀態(tài) 
$("#form1").resetForm(); 
}); 
}); 
</script> 