表單驗(yàn)證插件——validate
該插件自帶包含必填、數(shù)字、URL在內(nèi)容的驗(yàn)證規(guī)則，即時(shí)顯示異常信息，此外，還允許自定義驗(yàn)證規(guī)則，插件調(diào)用方法如下：
$(form).validate({options})
其中form參數(shù)表示表單元素名稱(chēng)，options參數(shù)表示調(diào)用方法時(shí)的配置對(duì)象，所有的驗(yàn)證規(guī)則和異常信息顯示的位置都在該對(duì)象中進(jìn)行設(shè)置。
例如，當(dāng)點(diǎn)擊表單中的“提交”按鈕時(shí)，調(diào)用validate插件驗(yàn)證用戶(hù)名輸入是否符合規(guī)則，并將異常信息顯示在頁(yè)面中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，在頁(yè)面中導(dǎo)入了validate插件，當(dāng)用戶(hù)在輸入框中錄入用戶(hù)名時(shí)，自動(dòng)根據(jù)規(guī)則進(jìn)入驗(yàn)證，并顯示提示信息，驗(yàn)證成功后，表單才能提交。
任務(wù)
我來(lái)試試，親自使用validate插件，完成對(duì)郵件格式的驗(yàn)證。
在下列代碼的第33、34、35行中，通過(guò)插件的配置對(duì)象，驗(yàn)證郵件格式。
- ?不會(huì)了怎么辦
-
- 在配置對(duì)象中，首先，獲取郵件元素名稱(chēng)作為聲明目標(biāo)，然后，將元素的required值設(shè)為true，表示不能為空，email值設(shè)為 true，表示為郵件格式。
- “required”和“email”屬性值只接收布爾類(lèi)型的值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表單驗(yàn)證插件</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://idcbgp.cn/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://idcbgp.cn/data/jquery.validate.js"></script>
<script type="text/javascript" src="http://idcbgp.cn/data/jquery.validate.messages_cn.js"></script>
</head>
<body>
<form id="frmV" method="get" action="#">
<div id="divtest">
<div class="title">
<span class="fl">表單驗(yàn)證插件</span>
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">郵箱：</span><br />
<input id="email" name="email" type="text" /><br />
<span class="tip"></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自定義驗(yàn)證規(guī)則*/
rules: {
?
?
?
}
},
/*錯(cuò)誤提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
</body>
</html>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
#divtest .content .tip
{
color: Red;
font-size: 12px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
