Bootstrap如何使用表单验证插件bootstrapValidator？（代码实例）

本篇文章给大家带来的内容是介绍bootstrap使用表单验证插件bootstrapvalidator的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。如果大家想要学习和获取更多的bootstrap相关教程也可以访问：bootstrap教程！

插件下载：http://www.jq22.com/jquery-info522

插件介绍

先上一个图：

下载地址：https://github.com/nghuuphuoc/bootstrapvalidator

使用方法：http://www.cnblogs.com/huangcong/p/5335376.html

使用提示

中文化：
下载插件后，将\js\bootstrapValidator\language\zh_CN.js 引入文件，即实现中文化

提交前验证表单：
更丰富一点的表单验证例子：http://www.jq22.com/yanshi522，直接上代码：

有道智云AI开放平台

有道智云AI开放平台

下载

1 
  2 
  3 
  4     
  5 
  6     
  7     
  8 
  9     
 10     
 11 
 12     
 13     
 14     
 15 
 16 
 17     

 18         

 19             
 20             

 21                 

 22                     

 23                         
Sign up
 24                     

 25 
 26                     

 27                         

 28                             Full name
 29                             

 30                                 
 31                             
 32                             

 33                                 
 34                             
 35                         

 36 
 37                         

 38                             Username
 39                             

 40                                 
 41                             
 42                         

 43 
 44                         

 45                             Email address
 46                             

 47                                 
 48                             
 49                         

 50 
 51                         

 52                             Password
 53                             

 54                                 
 55                             
 56                         

 57 
 58                         

 59                             Retype password
 60                             

 61                                 
 62                             
 63                         

 64 
 65                         

 66                             Gender
 67                             

 68                                 

 69                                     
 70                                          Male
 71                                     
 72                                 
 73                                 

 74                                     
 75                                          Female
 76                                     
 77                                 
 78                                 

 79                                     
 80                                          Other
 81                                     
 82                                 
 83                             

 84                         

 85 
 86                         

 87                             Birthday
 88                             

 89                                  (YYYY/MM/DD)
 90                             
 91                         

 92 
 93                         

 94                             Languages
 95                             

 96                                 

 97                                     
 98                                          English
 99                                     
100                                 
101                                 

102                                     
103                                          French
104                                     
105                                 
106                                 

107                                     
108                                          German
109                                     
110                                 
111                                 

112                                     
113                                          Russian
114                                     
115                                 
116                                 

117                                     
118                                          Other
119                                     
120                                 
121                             

122                         

123 
124124                         

125                             Programming Languages
126                             

127                                 

128                                     
129                                          .Net
130                                     
131                                 
132                                 

133                                     
134                                          Java
135                                     
136                                 
137                                 

138                                     
139                                          C/C++
140                                     
141                                 
142                                 

143                                     
144                                          PHP
145                                     
146                                 
147                                 

148                                     
149                                          Perl
150                                     
151                                 
152                                 

153                                     
154                                          Ruby
155                                     
156                                 
157                                 

158                                     
159                                          Python
160                                     
161                                 
162                                 

163                                     
164                                          Javascript
165                                     
166                                 
167                             

168                         

169 
170                         

171                             
172                             

173                                 
174                             
175                         

176 
177                         

178                             

179                                 Sign up
180                                 Sign up 2
181                                 Manual validate
182                                 Reset form
183                             
184                         

185                     
186                 

187             
188             
189         

190     

191 
192 
340 
341 

看331行，点击提交时，用 

$('#defaultForm').bootstrapValidator('validate');　

触发表单验证

下面是碰到的一个坑：

bootstrapValidator默认逻辑是当表单验证失败时，把按钮给变灰色。
但是项目中，button并不在form内部，是通过事件绑定来ajax提交的。那么问题来了：

项目需要当form验证失败时，不执行所绑定的后续事件。百度半天找不到相关资料，最后还是要靠google：

$("#yourform").submit(function(ev){ev.preventDefault();});
$("#submit").on("click", function(){

   var bootstrapValidator = $("#yourform").data('bootstrapValidator');
   bootstrapValidator.validate();
   if(bootstrapValidator.isValid())
     $("#yourform").submit();
   else return;

});

酱紫就可以判断表单验证是否通过了。