JQuery擴(kuò)展插件Validate 2通過參數(shù)設(shè)置驗(yàn)證規(guī)則
更新時間：2011年09月05日 21:44:22 作者：
在前面示例中使用的的方法簡單方便，但沒有完全將js與頁面結(jié)構(gòu)完全分離，也就是說js依賴了class,下面通過validate()方法的參數(shù)設(shè)置驗(yàn)證規(guī)則將js與頁面結(jié)構(gòu)完全分離
代碼如下：
<script type="text/javascript">
$(function() {
$("#signupForm").validate(
//在上例中新增的部分
{
rules: {
txtPassword1: "required", //密碼1必填
txtPassword2: { //密碼2的描述多于1項(xiàng)使用對象類型
required: true, //必填，這里可以是一個匿名方法
equalTo: "#txtPassword1", //必須與密碼1相等
rangelength: [5, 10] //長度5-10之間
},
txtEmail: "email" //電子郵箱必須合法
}
});
});
</script>
<form id="signupForm" method="get" action="">
<fieldset>
<legend>用戶注冊</legend>
<p>
<label for="txtPassword1">
密碼1</label>
<input id="txtPassword1" name="txtPassword1" type="password" />
</p>
<p>
<label for="txtPassword2">
密碼2</label>
<input id="txtPassword2" name="txtPassword2" type="password" />
</p>
<p>
<label for="txtEmail">
郵箱</label>
<input id="txtEmail" name="txtEmail" />
</p>
<p>
<input type="submit" value="提交" />
</p>
</fieldset>
</form>
遠(yuǎn)行結(jié)果：
注意：在ASP.NET中使用這種JS驗(yàn)證方法最好將服務(wù)器控件Id替換成客戶端Id,如：<%=控件Id.ClientId %>,<%=控件Id.UniqueId>
源碼下載
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function() {
$("#signupForm").validate(
//在上例中新增的部分
{
rules: {
txtPassword1: "required", //密碼1必填
txtPassword2: { //密碼2的描述多于1項(xiàng)使用對象類型
required: true, //必填，這里可以是一個匿名方法
equalTo: "#txtPassword1", //必須與密碼1相等
rangelength: [5, 10] //長度5-10之間
},
txtEmail: "email" //電子郵箱必須合法
}
});
});
</script>
<form id="signupForm" method="get" action="">
<fieldset>
<legend>用戶注冊</legend>
<p>
<label for="txtPassword1">
密碼1</label>
<input id="txtPassword1" name="txtPassword1" type="password" />
</p>
<p>
<label for="txtPassword2">
密碼2</label>
<input id="txtPassword2" name="txtPassword2" type="password" />
</p>
<p>
<label for="txtEmail">
郵箱</label>
<input id="txtEmail" name="txtEmail" />
</p>
<p>
<input type="submit" value="提交" />
</p>
</fieldset>
</form>
遠(yuǎn)行結(jié)果：
注意：在ASP.NET中使用這種JS驗(yàn)證方法最好將服務(wù)器控件Id替換成客戶端Id,如：<%=控件Id.ClientId %>,<%=控件Id.UniqueId>
源碼下載
您可能感興趣的文章:
- jQuery插件formValidator自定義函數(shù)擴(kuò)展功能實(shí)例詳解
- jQuery插件kinMaxShow擴(kuò)展效果用法實(shí)例
- jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件
- 擴(kuò)展Jquery插件處理mouseover時內(nèi)部有子元素時發(fā)生樣式閃爍
- JQuery擴(kuò)展插件Validate—6 radio、checkbox、select的驗(yàn)證
- JQuery擴(kuò)展插件Validate—4設(shè)置錯誤提示的樣式
- JQuery擴(kuò)展插件Validate 3通過參數(shù)設(shè)置錯誤信息
- JQuery擴(kuò)展插件Validate 1 基本使用方法并打包下載
- JQuery擴(kuò)展插件Validate 5添加自定義驗(yàn)證方法
- jQuery autocomplate 自擴(kuò)展插件、自動完成示例代碼
- boxy基于jquery的彈出層對話框插件擴(kuò)展應(yīng)用 彈出層選擇器
- jQuery插件擴(kuò)展測試實(shí)例
相關(guān)文章
使用jquery插件實(shí)現(xiàn)等寬輸出文字，具體的調(diào)用及實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
jQuery插件HighCharts繪制2D圓環(huán)圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D圓環(huán)圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制圓環(huán)圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這里主要是jQuery美化部分的實(shí)例，美化對象為文本框、密碼框、文本域、Select下拉框、按鈕等，有了這些示例，美化其它的表單元素應(yīng)該不是大問題。2015-04-04
jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動置頂狀態(tài)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動置頂狀態(tài)功能,涉及基于jQuery的事件響應(yīng)及狀態(tài)監(jiān)聽等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jQuery Validation Plugin驗(yàn)證插件手動驗(yàn)證
jquery.validate是jquery旗下的一個驗(yàn)證框架，借助jquery的優(yōu)勢，我們可以迅速驗(yàn)證一些常見的輸入,并且可以自己擴(kuò)充自己的驗(yàn)證方法，并且對國際化也有很好的支持，接下來通過本文給大家介紹jQuery Validation Plugin驗(yàn)證插件手動驗(yàn)證2016-01-01
基于jQuery實(shí)現(xiàn)網(wǎng)頁進(jìn)度顯示插件
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)網(wǎng)頁進(jìn)度顯示插件的實(shí)現(xiàn)方法以及源碼下載，十分的詳細(xì)，并自帶2種皮膚，這里推薦給小伙伴們。2015-03-03
這篇文章主要介紹了jQuery中each()方法用法,以實(shí)例形式詳細(xì)分析了each()方法的功能、定義及使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能，需要的朋友可以參考下。2011-10-10
BootStrap glyphicon圖標(biāo)無法顯示的解決方法
如果不注意bootstrap引入css和fonts的規(guī)范，則可能會導(dǎo)致bootstrap 在顯示glyphicon圖標(biāo)時無法正常顯示，顯示為方框。該怎么解決呢？下面小編給大家解答下2016-09-09
這篇文章對于剛開始學(xué)習(xí)jquery的css 選擇器的朋友是個不錯的參考，大家可以看實(shí)例演示即可。2010-05-05