Bootstrap Validate表单验证

1、依赖js、css文件

1. <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>  
2. <link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>  
3.    
4. <script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>  
5. <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>  
6.    
7. <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>  
8.    
9. //如果你想使用默认的语言包，请引入下面的文件  

1. <script type="text/javascript" src="/path/to/src/js/language/languagecode_COUNTRYCODE.js"></script>  

2、html代码

[html]  view plain  copy

 print ?

1. <form>  
2.     <div class="form-group">  
3.         <label>Username</label>  
4.         <input type="text" class="form-control" name="username" />  
5.     </div>  
6.     <div class="form-group">  
7.         <label>Email address</label>  
8.         <input type="text" class="form-control" name="email" />  
9.     </div>  
10. </form>  

注意：1、input必须放在 <div class="form-group">  中，否则错误提示显示不出来，或者显示位置偏移

            2、必须包含 name 字段，验证是靠name字段的

3、js代码

1. $(document).ready(function() {  
2.         $('.form-horizontal').bootstrapValidator({  
3.             message: 'This value is not valid',  
4.             feedbackIcons: {  
5.                 valid: 'glyphicon glyphicon-ok',  
6.                 invalid: 'glyphicon glyphicon-remove',  
7.                 validating: 'glyphicon glyphicon-refresh'  
8.             },  
9.             fields: {  
10.                 cpName: {  
11.                     message: '用户名验证失败',  
12.                     validators: {  
13.                         notEmpty: {  
14.                             message: '用户名不能为空'  
15.                         },  
16.                         stringLength: {  
17.                             min: 6,  
18.                             max: 18,  
19.                             message: '用户名长度必须在6到18位之间'  
20.                         },  
21.                         regexp: {  
22.                             regexp: /^[a-zA-Z0-9_]+$/,  
23.                             message: '用户名只能包含大写、小写、数字和下划线'  
24.                         }  
25.                     }  
26.                 },  
27.             },  
28.             submitHandler: function (validator, form, submitButton) {  
29.                 alert("submit");  
30.             }  
31.         });  
32.     });  

notEmpty：非空验证；

stringLength：字符串长度验证；

regexp：正则表达式验证；

emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）

除此之外，在文档里面我们看到它总共有46个验证类型，我们抽几个常见的出来看看：

base64：64位编码验证；

between：验证输入值必须在某一个范围值以内，比如大于10小于100；

creditCard：身份证验证；

date：日期验证；

ip：IP地址验证；

numeric：数值验证；

phone：电话号码验证需要加上country: 'CN'参数 不然回报The country code null is not supported；

uri：url验证；

bootstrap-datepicker 与bootstrapValidator同时使用时，选择日期后，无法正常触发校验

根据应用场景分析，当日期选择插件关闭时，期望能够触发校验。所以使用bootstrap-datepicker的hide方法。当日期选择框关闭时，执行刷新校验。先贴代码再解释：

[javascript]  view plain  copy

 

1.     /* 加载时间选择插件 */  
2.     $("#companyRegisteTime").datepicker({  
3.         todayBtn : "linked",  
4.         autoclose : true,  
5.         todayHighlight : true,  
6.         endDate : new Date()  
7.     }).on('hide',function(e) {  
8.                 $('#enterpriseInfoForm').data('bootstrapValidator')  
9.                     .updateStatus('companyRegisteTime', 'NOT_VALIDATED',null)  
10.                     .validateField('companyRegisteTime');  
11.             });  
12.       

updateStatus方法的作用是更新给定字段的校验状态，官方介绍如下：

validateField方法的作用是触发给定字段的校验