使用jQuery validate 驗(yàn)證注冊(cè)表單實(shí)例演示
Validation是jQuery的插件,提供的方法可以大大簡(jiǎn)化驗(yàn)證表單的工作,功能也足夠一般的需要了。rules也足夠簡(jiǎn)單,很容易上手,舉個(gè)簡(jiǎn)單的例子,用validation來驗(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)很明確了。正片開始
<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.dbjr.com.cn/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實(shí)現(xiàn)表單提交驗(yàn)證
本文給大家分享的是一段基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的表單提交驗(yàn)證的代碼,非常簡(jiǎn)單實(shí)用,推薦給有相同需求的小伙伴們參考下。2014-11-11jQuery的Each比JS原生for循環(huán)性能慢很多的原因
這篇文章主要介紹了jQuery的Each比JS原生for循環(huán)性能慢很多的原因的相關(guān)資料,需要的朋友可以參考下2016-07-07jquery無刷新驗(yàn)證郵箱地址實(shí)現(xiàn)實(shí)例
原理非常的簡(jiǎn)單在用戶輸入郵箱離開之后我們通用jquery ajax發(fā)送數(shù)據(jù)給mail.php文件,然后由它實(shí)現(xiàn)查找此郵箱是不是在數(shù)據(jù)庫中然后反饋對(duì)應(yīng)信息即可2014-02-02jquery實(shí)現(xiàn)圖片等比例縮放以及max-width在ie中不兼容解決
圖片等比例縮放在某些情況下還是比較事用的,不過max-width和max-height在ie6中不兼容問題很是郁悶,接下來使用jQuery解決這個(gè)問題,感興趣的各位可以參考下哈2013-03-03jQuery產(chǎn)品間斷向下滾動(dòng)效果核心代碼
這篇文章主要為大家分享了jQuery產(chǎn)品間斷向下滾動(dòng)的核心代碼,需要的朋友可以參考下2014-05-05jQuery內(nèi)容選擇器與表單選擇器實(shí)例分析
這篇文章主要介紹了jQuery內(nèi)容選擇器與表單選擇器,結(jié)合實(shí)例形式分析了jQuery內(nèi)容選擇器與表單選擇器的功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06