這篇文章給大家分享的是有關(guān)Bootstrap怎么使用表單驗(yàn)證插件bootstrapValidator的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)客戶idc服務(wù)中心，提供成都聯(lián)通服務(wù)器托管、成都服務(wù)器、成都主機(jī)托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開放、透明、穩(wěn)定、高性價(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級技術(shù)保障。

插件介紹

先上一個圖：

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

使用提示

中文化：
下載插件后，將\js\bootstrapValidator\language\zh_CN.js 引入文件，即實(shí)現(xiàn)中文化

提交前驗(yàn)證表單：

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行，點(diǎn)擊提交時(shí)，用

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

觸發(fā)表單驗(yàn)證

下面是碰到的一個坑：

bootstrapValidator默認(rèn)邏輯是當(dāng)表單驗(yàn)證失敗時(shí)，把按鈕給變灰色。
但是項(xiàng)目中，button并不在form內(nèi)部，是通過事件綁定來ajax提交的。那么問題來了：

項(xiàng)目需要當(dāng)form驗(yàn)證失敗時(shí)，不執(zhí)行所綁定的后續(xù)事件。百度半天找不到相關(guān)資料，最后還是要靠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;

});

醬紫就可以判斷表單驗(yàn)證是否通過了。

感謝各位的閱讀！關(guān)于Bootstrap怎么使用表單驗(yàn)證插件bootstrapValidator就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！