jquery validation驗(yàn)證表單插件
jQuery驗(yàn)證表單插件——jquery-validation
The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy. ——官方介紹
validation使用步驟
引入jQuery庫(kù)和validation插件
如果需要官方的國(guó)際化提示信息,可以導(dǎo)入相應(yīng)的messages_xx.js庫(kù)文件。
PS:下載地址:GitHub jzaefferer/jquery-validation
選中表單元素,顯式調(diào)用驗(yàn)證方法
<script type="text/javascript"> $(function() { $("#form").validate(); }); </script>
書寫驗(yàn)證規(guī)則和消息
<script type="text/javascript"> $(function() { $("#form").validate({ rules:{}, messages:{} }); }); </script>
rules規(guī)則語(yǔ)法
rules:{
字段名:校驗(yàn)器,
字段名:校驗(yàn)器,...
}
校驗(yàn)器語(yǔ)法
校驗(yàn)器:值,
校驗(yàn)器:值,...
messages提示語(yǔ)法
message:{ 字段名:{ 校驗(yàn)器:"提示", 校驗(yàn)器:"提示",... } 字段名:{ 校驗(yàn)器:"提示", 校驗(yàn)器:"提示",... } }
校驗(yàn)器取值
案例
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script> <script type="text/javascript" src="../../js/jquery.validate.min.js" ></script> <script type="text/javascript" src="../../js/messages_zh.js" ></script> <script> $(function(){ $("#registForm").validate({ rules:{ user:{ required:true, minlength:2 }, password:{ required:true, digits:true, minlength:6 }, repassword:{ required:true, digits:true, minlength:6, equalTo:"[name='password']" }, email:{ required:true, email:true }, username:{ required:true, minlength:2 }, sex:{ required:true } }, messages:{ user:{ required:"用戶名不能為空!", minlength:"用戶名不得少于2個(gè)字符!" }, password:{ required:"密碼不能為空!", digits:"密碼必須是數(shù)字!", minlength:"密碼長(zhǎng)度不得低于6位!" }, repassword:{ required:"確認(rèn)密碼不能為空!", digits:"密碼必須是數(shù)字!", minlength:"密碼長(zhǎng)度不得低于6位!", equalTo:"兩次密碼不一致!" }, email:{ required:"郵箱不能為空!", email:"郵箱格式不正確!" }, username:{ required:"姓名不能為空!", minlength:"姓名不得少于2個(gè)字符!" }, sex:{ required:"性別必須勾選!" } }, errorElement: "label", //用來(lái)創(chuàng)建錯(cuò)誤提示信息標(biāo)簽 success: function(label) { //驗(yàn)證成功后的執(zhí)行的回調(diào)函數(shù) //label指向上面那個(gè)錯(cuò)誤提示信息標(biāo)簽label label.text(" ") //清空錯(cuò)誤提示消息 .addClass("success"); //加上自定義的success類 } }); }) </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery?validation驗(yàn)證電話號(hào)碼,email(實(shí)例代碼)
- jQuery.Validate 使用筆記(jQuery Validation范例 )
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- jQuery驗(yàn)證插件validation使用指南
- jQuery Validation實(shí)例代碼 讓驗(yàn)證變得如此容易
- jQuery Validation插件remote驗(yàn)證方式的Bug解決
- Jquery Validation插件防止重復(fù)提交表單的解決方法
- Jquery validation remote 驗(yàn)證的緩存問題解決方法
- jquery插件validation實(shí)現(xiàn)驗(yàn)證身份證號(hào)等
- 修改jQuery Validation里默認(rèn)的驗(yàn)證方法
相關(guān)文章
解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯(cuò)誤的方法
這篇文章主要為大家詳細(xì)介紹了解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯(cuò)誤的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié),對(duì)于操作jquery的朋友可以參考下。2010-04-04JQuery 綁定select標(biāo)簽的onchange事件,彈出選擇的值,并實(shí)現(xiàn)跳轉(zhuǎn)、傳參
JQuery 綁定select標(biāo)簽的onchange事件,彈出選擇的值,并實(shí)現(xiàn)跳轉(zhuǎn)、傳參(selected的值和頁(yè)面其它元素的值)2011-01-01Jquery實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果代碼
Jquery實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果代碼,需要的朋友可以參考下2012-03-03jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式
這篇文章主要介紹了jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式的方法,實(shí)例分析了jQuery中css方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jQuery取得設(shè)置清空select選擇的文本與值
這篇文章主要介紹了jQuery如何取得設(shè)置清空select選擇的文本與值,下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2014-07-07