使用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