使用jquery.validate.js实现boostrap3的校验和验证

Posted Microtiger

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jquery.validate.js实现boostrap3的校验和验证相关的知识,希望对你有一定的参考价值。

使用jquery.validate.js实现boostrap3的校验和验证

boostrap3验证框架

jquery.validate.js校验表单

 

效果见下图:


技术分享图片
 


技术分享图片
 

 

 

一、插件下载

官网下载地址:http://jqueryvalidation.org/

或者在附件下载 jquery-validation-1.14.0.zip

 

二、加入js文件,依赖jquery

jquery.validate.min.js

additional-methods.min.js

messages_zh.min.js

additional-methods-custom.js  (自己定义的校验方法扩展js文件)

 

三、验证表单

1、页面

 

html代码  技术分享图片
  1. <div class="w720 mt5 fr">  
  2.             <div class="blue5 pt20 pb20 p10 user_password">  
  3.                 <form id="userInfoEditForm" class="form-horizontal">  
  4.                     <div class="form-group">  
  5.                         <label for="mobile" class="control-label">昵称:</label>  
  6.                         <div >  
  7.                             <input type="text" class="form-control" id="nickname" name="nickname" placeholder="请输入昵称" value="${userInSession.nickname}"/>  
  8.                         </div>  
  9.                     </div>  
  10.                     <div class="form-group">  
  11.                         <label for="mobile" class="control-label">姓名:</label>  
  12.                         <div>  
  13.                             <input type="text" class="form-control" id="realName" name="realName" placeholder="请输入真实姓名" value="${userInSession.realName}"/>  
  14.                         </div>  
  15.                     </div>  
  16.                     <div class="form-group">  
  17.                         <label for="tel1" class="control-label">性别:</label>  
  18.                         <div>  
  19.                             <select name="genders" id="genders" class="form-control">  
  20.                                 <option value="">请选择…</option>  
  21.                                 <c:forEach items="${genders}" var="gender">  
  22.                                     <option value="${gender}" ${userInSession.genders eq gender?"selected=‘selected‘":""}>${gender.value}</option>  
  23.                                 </c:forEach>  
  24.                             </select>  
  25.                         </div>  
  26.                     </div>  
  27.                     <div class="form-group">  
  28.                         <label for="tel2" class="control-label">联系地址:</label>  
  29.                         <div>  
  30.                             <input type="text" class="form-control" id="address" name="address"  placeholder="请输入联系地址" value="${userInSession.address}"/>  
  31.                         </div>  
  32.                     </div>  
  33.                         
  34.                     <div class="form-group">  
  35.                         <div class="form-group-btn">  
  36.                             <button type="submit" id="btnUserInfoEdit2" class="btn btn-primary">确认</button>  
  37.                         </div>  
  38.                     </div>  
  39.                 </form>  
  40.             </div>  
  41.         </div>  

 

2、js校验

Js代码  技术分享图片
  1. var validateObj = $(‘#userInfoEditForm‘).validate({  
  2.     ignore: "",  
  3.     errorClass : ‘help-block‘,    
  4.     focusInvalid : true,  
  5.     rules : {    
  6.         nickname : {    
  7.             required : true  
  8.         },    
  9.         realName : {    
  10.             required : true    
  11.         },  
  12.         genders : {  
  13.             required : true  
  14.             /* ,select2Reg : true */  
  15.         },  
  16.         address : {  
  17.             required : true    
  18.         }  
  19.     },    
  20.     messages : {    
  21.         nickname : {    
  22.             required : "昵称不能为空"  
  23.         },    
  24.         realName : {    
  25.             required : "姓名不能为空"    
  26.         },    
  27.         genders : {    
  28.             required : "请选择性别"    
  29.         },    
  30.         address : {    
  31.             required : "地址不能为空"    
  32.         }  
  33.     },  
  34.     onclick : function (element) {  
  35.         $(element).valid();  
  36.     },  
  37.     onfocusout: function (element) {  
  38.         $(element).valid();  
  39.     },  
  40.     highlight : function(element) {  
  41.         //alert($(element).closest(‘.form-group‘).html());  
  42.         $(element).closest(‘.form-group‘).removeClass(‘has-success‘).addClass(‘has-error‘);  
  43.     },  
  44.     success : function(label) {    
  45.         label.closest(‘.form-group‘).removeClass(‘has-error‘).addClass(‘has-success‘);    
  46.         label.remove();    
  47.     },    
  48.     errorPlacement : function(error, element) {    
  49.         element.parent(‘div‘).append(error);    
  50.     },    
  51.     submitHandler : function(form) {  
  52.         return false;  
  53.         form.submit();//form.submit(); 或者$(form).ajaxSubmit();  
  54.     }    
  55. });   
  56.   
  57. $("#genders").change(function(){  
  58.     $(this).valid();  
  59. });  

 

3、自定义校验方法(additional-methods-custom.js)

Js代码  技术分享图片
  1. /** 
  2.  * 检查手机号码 
  3.  * @since 2015-09-14 
  4. */  
  5. jQuery.validator.addMethod("phoneReg", function(value, element) {    
  6.     var value = $(element).val();  
  7.     console.log("value = "+value)  
  8.     return this.optional(element) || (checkPhone(value));  
  9. }, "请输入正确的11位手机号码");  

 

四、详细使用见:http://fanshuyao.iteye.com/blog/2243580

 

五、select2校验问题见

http://fanshuyao.iteye.com/blog/2243544





以上是关于使用jquery.validate.js实现boostrap3的校验和验证的主要内容,如果未能解决你的问题,请参考以下文章

最小最大价格范围验证不适用于 jquery.validate.js

怎样更灵活的是使用jquery.validate--未完待续

jquery.validate使用

jquery.validate.js使用之自定义表单验证规则

jquery.validate.unobtrusive的使用

jQuery验证控件jquery.validate.js的使用介绍