快捷導(dǎo)航

使用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 
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 
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.dbjr.com.cn/article/24405.htm

您可能感興趣的文章:

相關(guān)文章

基于jQuery實(shí)現(xiàn)表單提交驗(yàn)證
本文給大家分享的是一段基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的表單提交驗(yàn)證的代碼，非常簡(jiǎn)單實(shí)用，推薦給有相同需求的小伙伴們參考下。
2014-11-11
jQuery的Each比JS原生for循環(huán)性能慢很多的原因
這篇文章主要介紹了jQuery的Each比JS原生for循環(huán)性能慢很多的原因的相關(guān)資料,需要的朋友可以參考下
2016-07-07
jquery無(wú)刷新驗(yàn)證郵箱地址實(shí)現(xiàn)實(shí)例
原理非常的簡(jiǎn)單在用戶輸入郵箱離開(kāi)之后我們通用jquery ajax發(fā)送數(shù)據(jù)給mail.php文件，然后由它實(shí)現(xiàn)查找此郵箱是不是在數(shù)據(jù)庫(kù)中然后反饋對(duì)應(yīng)信息即可
2014-02-02
jQuery仿京東商城樓梯式導(dǎo)航定位菜單
這篇文章主要介紹了jQuery仿京東商城樓梯式導(dǎo)航定位菜單的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
jquery實(shí)現(xiàn)圖片等比例縮放以及max-width在ie中不兼容解決
圖片等比例縮放在某些情況下還是比較事用的,不過(guò)max-width和max-height在ie6中不兼容問(wèn)題很是郁悶，接下來(lái)使用jQuery解決這個(gè)問(wèn)題，感興趣的各位可以參考下哈
2013-03-03
jQuery產(chǎn)品間斷向下滾動(dòng)效果核心代碼
這篇文章主要為大家分享了jQuery產(chǎn)品間斷向下滾動(dòng)的核心代碼,需要的朋友可以參考下
2014-05-05
jQuery檢查事件是否觸發(fā)的方法
這篇文章主要介紹了jQuery檢查事件是否觸發(fā)的方法,涉及jQuery中trigger方法的使用技巧,需要的朋友可以參考下
2015-06-06
jQuery中delegate()方法的用法詳解
delegate()方法是為匹配元素的子元素添加一個(gè)或多個(gè)事件，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。下面就是詳細(xì)介紹，有需要的朋友可以來(lái)介紹一下。
2016-10-10
jQuery如何解決IE輸入框不能輸入的問(wèn)題
在IE10以上版本，微軟為了提高IE輸入框的便利性，增加了文本內(nèi)容全部刪除和密碼眼睛功能，但是有些時(shí)候打開(kāi)新的頁(yè)面里，輸入框卻被鎖定無(wú)法編輯，需要刷新一下頁(yè)面，或者如果輸入框有內(nèi)容需要點(diǎn)擊一下輸入框后面的叉叉后才能輸入，怎么解決呢，下面小編給大家解答下
2016-10-10
jQuery內(nèi)容選擇器與表單選擇器實(shí)例分析
這篇文章主要介紹了jQuery內(nèi)容選擇器與表單選擇器,結(jié)合實(shí)例形式分析了jQuery內(nèi)容選擇器與表單選擇器的功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-06-06