jQuery驗證表單插件――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庫和validation插件
如果需要官方的國際化提示信息，可以導入相應的messages_xx.js庫文件。
PS：下載地址：GitHub jzaefferer/jquery-validation
選中表單元素，顯式調用驗證方法
<script type="text/javascript"> $(function() { $("#form").validate(); });</script>書寫驗證規則和消息
<script type="text/javascript"> $(function() { $("#form").validate({ rules:{}, messages:{} }); });</script>rules規則語法
rules:{
字段名:校驗器,
字段名:校驗器,...
}
校驗器語法
校驗器:值,
校驗器:值,...
messages提示語法
message:{ 字段名:{ 校驗器:"提示", 校驗器:"提示",... } 字段名:{ 校驗器:"提示", 校驗器:"提示",... }}校驗器取值
案例
<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個字符!" }, password:{ required:"密碼不能為空!", digits:"密碼必須是數字!", minlength:"密碼長度不得低于6位!" }, repassword:{ required:"確認密碼不能為空!", digits:"密碼必須是數字!", minlength:"密碼長度不得低于6位!", equalTo:"兩次密碼不一致!" }, email:{ required:"郵箱不能為空!", email:"郵箱格式不正確!" }, username:{ required:"姓名不能為空!", minlength:"姓名不得少于2個字符!" }, sex:{ required:"性別必須勾選!" } }, errorElement: "label", //用來創建錯誤提示信息標簽 success: function(label) { //驗證成功后的執行的回調函數 //label指向上面那個錯誤提示信息標簽label label.text(" ") //清空錯誤提示消息 .addClass("success"); //加上自定義的success類 } }); })</script>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
