Bootstrap怎么使用表单验证插件bootstrapValidator

这篇文章给大家分享的是有关Bootstrap怎么使用表单验证插件bootstrapValidator的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联客户idc服务中心，提供成都联通服务器托管、成都服务器、成都主机托管、成都双线服务器等业务的一站式服务。通过各地的服务中心，我们向成都用户提供优质廉价的产品以及开放、透明、稳定、高性价比的服务，资深网络工程师在机房提供7*24小时标准级技术保障。

插件介绍

先上一个图：

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

使用提示

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

提交前验证表单：

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 
124                         

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;

});

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

感谢各位的阅读！关于Bootstrap怎么使用表单验证插件bootstrapValidator就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！