在這節(jié)我們將使用validation插件實(shí)現(xiàn)注冊(cè)頁面的驗(yàn)證功能，通過這個(gè)例子，可以更全面的掌握該插件的使用功能。
頁面樣式代碼：
<
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"
>
這里有一些錯(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
},
//
通過屬性maxlength設(shè)置文本最大長度
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:
"
密碼長度必須大于8
"
},
txtConfirmPwd: { required:
"
請(qǐng)輸入您的確認(rèn)密碼
"
,
minlength:
"
確認(rèn)的密碼長度必須大于8
"
,
equalTo:
"
請(qǐng)保證輸入的密碼和確認(rèn)的密碼要一樣
"
},
txtDOB: { required:
"
請(qǐng)輸入您的生日
"
,
date:
"
您輸入的生日日期格式不對(duì)
"
},
txtAddress1: { required:
"
請(qǐng)輸入您的地址1
"
,
maxlength:
"
您輸入的地址1長度不能超過200
"
},
txtAddress2: { maxlength:
"
您輸入的地址1長度不能超過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ù)到第一次加載頁面的狀態(tài)
$(
"
#form1
"
).resetForm();
});
});
</
script
>
注意：樣式選擇器div.errorContainer和div .errorContainer的含義不一樣，第一個(gè)是選擇所有帶樣式類errorContainer的div元素，而第二個(gè)是選擇div元素里面的后代所有帶樣式類errorContainer的元素。
最終效果圖：
ASP.NET jQuery 食譜12 (通過使用jQuery validation插件簡單實(shí)現(xiàn)用戶注冊(cè)頁面驗(yàn)證功能)
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
