使用jQuery validate 驗(yàn)證注冊(cè)表單實(shí)例演示
更新時(shí)間：2013年03月25日 11:13:36 作者：
Validation是jQuery的插件，提供的方法可以大大簡(jiǎn)化驗(yàn)證表單的工作，接下來(lái)為大家詳細(xì)介紹下使用方法，感興趣的各位可以參考下哈
Validation是jQuery的插件，提供的方法可以大大簡(jiǎn)化驗(yàn)證表單的工作，功能也足夠一般的需要了。rules也足夠簡(jiǎn)單，很容易上手，舉個(gè)簡(jiǎn)單的例子，用validation來(lái)驗(yàn)證注冊(cè)表單。
首先確定驗(yàn)證的目標(biāo)是：
1. 必填項(xiàng)不能為空
2. 注冊(cè)用戶名必須為6-12個(gè)字符內(nèi)
3. 合格的email格式
4. 密碼必須為6-18個(gè)字符
5. 確認(rèn)密碼必須跟密碼一致
ok，目標(biāo)很明確了。正片開(kāi)始
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
$( "#regForm" ).validate({
rules: {
// 注冊(cè)用戶名
username: {
required: true,
minlength: 5,
maxlength: 12
},
email: {
required: true,
email: true
},
// 密碼
password: {
required: true,
minlength: 6,
maxlength: 18
},
// 確認(rèn)密碼
confirm_password: {
equalTo:"#password"
},
// 檢驗(yàn)驗(yàn)證碼
captcha: {
required: true,
remote: "checkCaptcha.php"
}
},
messages: {
// 注冊(cè)用戶名
username: {
required: "此項(xiàng)不能為空",
minlength: "不能少于5個(gè)字符",
maxlength: "不能多于12個(gè)字符"
},
email: {
required: "此項(xiàng)不能為空",
email: "email格式不正確"
},
// 密碼
password: {
required: "此項(xiàng)不能為空",
minlength: "不能少于6個(gè)字符",
maxlength: "不能多于18個(gè)字符"
},
// 確認(rèn)密碼
confirm_password: "兩次輸入密碼不一致",
// 檢驗(yàn)驗(yàn)證碼
captcha: {
required: "請(qǐng)輸入驗(yàn)證碼",
remote: "驗(yàn)證碼輸入錯(cuò)誤"
}
}
});
});
</script>
運(yùn)行后，得到下面的結(jié)果
更多用法參考 http://www.fzitv.net/article/24405.htm
您可能感興趣的文章:
- jQuery Validate驗(yàn)證表單時(shí)多個(gè)name相同的元素只驗(yàn)證第一個(gè)的解決方法
- 實(shí)例詳解jQuery表單驗(yàn)證插件validate
- jQuery Validate插件實(shí)現(xiàn)表單驗(yàn)證
- jQuery Validate插件實(shí)現(xiàn)表單強(qiáng)大的驗(yàn)證功能
- jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式
- 詳解jquery validate實(shí)現(xiàn)表單驗(yàn)證 （正則表達(dá)式）
- 功能強(qiáng)大的jquery.validate表單驗(yàn)證插件
- JQuery validate 驗(yàn)證一個(gè)單獨(dú)的表單元素實(shí)例
相關(guān)文章
jQuery.getScript加載同域JS為xhr請(qǐng)求，導(dǎo)致firebug不能正常讀取js，因此不能夠斷點(diǎn)該js2012-02-02
這篇文章主要介紹了jQuery選擇器源碼解讀（三）：tokenize方法,本文用詳細(xì)的注釋解讀了tokenize方法的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-03-03
本文給大家匯總了2014年最熱門的9款jQuery特效插件，小伙伴們根據(jù)自己的需求直接帶走吧。
2014-12-12 
關(guān)于用Jquery的height()、width()計(jì)算動(dòng)態(tài)插入的IMG標(biāo)簽的寬高的問(wèn)題
關(guān)于用Jquery的height()、width()計(jì)算動(dòng)態(tài)插入的IMG標(biāo)簽的寬高的問(wèn)題的解決方法，需要的朋友可以參考下。
2010-12-12 
基于jquery的選擇標(biāo)簽至文本域效果,可多選/可過(guò)濾重復(fù)/可限制個(gè)數(shù)的實(shí)現(xiàn)代碼
選擇標(biāo)簽至表單域插件, 基于jQuery, 可多選/可過(guò)濾重復(fù)/可限制個(gè)數(shù). 是以前的項(xiàng)目中用到過(guò)的一個(gè)項(xiàng)目, 當(dāng)初是用原生js東拼西湊的, 用jQuery重寫了下,已封裝成插件.
2010-11-11 
討論jQuery和javascript性能的文章并不罕見(jiàn)。然而，本文我計(jì)劃總結(jié)一些速度方面的技巧和我本人的一些建議，來(lái)提升你的jQuery和javascript代碼。好的代碼會(huì)帶來(lái)速度的提升?？焖黉秩竞晚憫?yīng)意味著更好的用戶體驗(yàn)
2014-03-03 
這篇文章主要介紹了jQuery()方法的第二個(gè)參數(shù)的使用方法，十分的簡(jiǎn)單，有需要的小伙伴可以參考下。
2015-04-04 
Jquery中$.post和$.ajax的用法小結(jié)
本節(jié)重點(diǎn)講的是jquery中調(diào)用ajax的4種方法中最常用的：$.post、和$ajax。如果讀者沒(méi)有javascript和jquery的知識(shí)，或者沒(méi)有ajax的概念，那么請(qǐng)先去問(wèn)問(wèn)度娘，再來(lái)讀本文。
2015-04-04 ![Javascript 驗(yàn)證上傳圖片大小[客戶端]](http://img.jbzj.com/images/xgimg/bcimg9.png)
在做上傳圖片的時(shí)候，如果不限制上傳圖片大小，后果非常的嚴(yán)重。那么我們?cè)鯓硬趴梢越鉀Q一個(gè)棘手的問(wèn)題呢？
2009-08-08