Bootstrap如何使用表單驗證外掛bootstrapValidator？（程式碼實例）-js教程-PHP中文網

首頁

web前端

js教程

Bootstrap如何使用表單驗證外掛bootstrapValidator？（程式碼實例）

青灯夜游

Oct 19, 2018 pm 03:25 PM

bootstrap外掛表單驗證

本篇文章帶給大家的內容是介紹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，直接上碼：

1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>BootstrapValidator demo</title>
  5 
  6     <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
  7     <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
  8 
  9     <!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
 10     <!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->
 11 
 12     <script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script>
 13     <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
 14     <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
 15 </head>
 16 <body>
 17     <p class="container">
 18         <p class="row">
 19             <!-- form: -->
 20             <section>
 21                 <p class="col-lg-8 col-lg-offset-2">
 22                     <p class="page-header">
 23                         <h2 id="Sign-nbsp-up">Sign up</h2>
 24                     </p>
 25 
 26                     <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
 27                         <p class="form-group">
 28                             <label class="col-lg-3 control-label">Full name</label>
 29                             <p class="col-lg-4">
 30                                 <input type="text" class="form-control" name="firstName" placeholder="First name" />
 31                             </p>
 32                             <p class="col-lg-4">
 33                                 <input type="text" class="form-control" name="lastName" placeholder="Last name" />
 34                             </p>
 35                         </p>
 36 
 37                         <p class="form-group">
 38                             <label class="col-lg-3 control-label">Username</label>
 39                             <p class="col-lg-5">
 40                                 <input type="text" class="form-control" name="username" />
 41                             </p>
 42                         </p>
 43 
 44                         <p class="form-group">
 45                             <label class="col-lg-3 control-label">Email address</label>
 46                             <p class="col-lg-5">
 47                                 <input type="text" class="form-control" name="email" />
 48                             </p>
 49                         </p>
 50 
 51                         <p class="form-group">
 52                             <label class="col-lg-3 control-label">Password</label>
 53                             <p class="col-lg-5">
 54                                 <input type="password" class="form-control" name="password" />
 55                             </p>
 56                         </p>
 57 
 58                         <p class="form-group">
 59                             <label class="col-lg-3 control-label">Retype password</label>
 60                             <p class="col-lg-5">
 61                                 <input type="password" class="form-control" name="confirmPassword" />
 62                             </p>
 63                         </p>
 64 
 65                         <p class="form-group">
 66                             <label class="col-lg-3 control-label">Gender</label>
 67                             <p class="col-lg-5">
 68                                 <p class="radio">
 69                                     <label>
 70                                         <input type="radio" name="gender" value="male" /> Male
 71                                     </label>
 72                                 </p>
 73                                 <p class="radio">
 74                                     <label>
 75                                         <input type="radio" name="gender" value="female" /> Female
 76                                     </label>
 77                                 </p>
 78                                 <p class="radio">
 79                                     <label>
 80                                         <input type="radio" name="gender" value="other" /> Other
 81                                     </label>
 82                                 </p>
 83                             </p>
 84                         </p>
 85 
 86                         <p class="form-group">
 87                             <label class="col-lg-3 control-label">Birthday</label>
 88                             <p class="col-lg-5">
 89                                 <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
 90                             </p>
 91                         </p>
 92 
 93                         <p class="form-group">
 94                             <label class="col-lg-3 control-label">Languages</label>
 95                             <p class="col-lg-5">
 96                                 <p class="checkbox">
 97                                     <label>
 98                                         <input type="checkbox" name="languages[]" value="english" /> English
 99                                     </label>
100                                 </p>
101                                 <p class="checkbox">
102                                     <label>
103                                         <input type="checkbox" name="languages[]" value="french" /> French
104                                     </label>
105                                 </p>
106                                 <p class="checkbox">
107                                     <label>
108                                         <input type="checkbox" name="languages[]" value="german" /> German
109                                     </label>
110                                 </p>
111                                 <p class="checkbox">
112                                     <label>
113                                         <input type="checkbox" name="languages[]" value="russian" /> Russian
114                                     </label>
115                                 </p>
116                                 <p class="checkbox">
117                                     <label>
118                                         <input type="checkbox" name="languages[]" value="other" /> Other
119                                     </label>
120                                 </p>
121                             </p>
122                         </p>
123 
124                         <p class="form-group">
125                             <label class="col-lg-3 control-label">Programming Languages</label>
126                             <p class="col-lg-5">
127                                 <p class="checkbox">
128                                     <label>
129                                         <input type="checkbox" name="programs[]" value="net" /> .Net
130                                     </label>
131                                 </p>
132                                 <p class="checkbox">
133                                     <label>
134                                         <input type="checkbox" name="programs[]" value="java" /> Java
135                                     </label>
136                                 </p>
137                                 <p class="checkbox">
138                                     <label>
139                                         <input type="checkbox" name="programs[]" value="c" /> C/C++
140                                     </label>
141                                 </p>
142                                 <p class="checkbox">
143                                     <label>
144                                         <input type="checkbox" name="programs[]" value="php" /> PHP
145                                     </label>
146                                 </p>
147                                 <p class="checkbox">
148                                     <label>
149                                         <input type="checkbox" name="programs[]" value="perl" /> Perl
150                                     </label>
151                                 </p>
152                                 <p class="checkbox">
153                                     <label>
154                                         <input type="checkbox" name="programs[]" value="ruby" /> Ruby
155                                     </label>
156                                 </p>
157                                 <p class="checkbox">
158                                     <label>
159                                         <input type="checkbox" name="programs[]" value="python" /> Python
160                                     </label>
161                                 </p>
162                                 <p class="checkbox">
163                                     <label>
164                                         <input type="checkbox" name="programs[]" value="javascript" /> Javascript
165                                     </label>
166                                 </p>
167                             </p>
168                         </p>
169 
170                         <p class="form-group">
171                             <label class="col-lg-3 control-label" id="captchaOperation"></label>
172                             <p class="col-lg-2">
173                                 <input type="text" class="form-control" name="captcha" />
174                             </p>
175                         </p>
176 
177                         <p class="form-group">
178                             <p class="col-lg-9 col-lg-offset-3">
179                                 <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
180                                 <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button>
181                                 <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
182                                 <button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
183                             </p>
184                         </p>
185                     </form>
186                 </p>
187             </section>
188             <!-- :form -->
189         </p>
190     </p>
191 
192 <script type="text/javascript">
193 $(document).ready(function() {
194     // Generate a simple captcha
195     function randomNumber(min, max) {
196         return Math.floor(Math.random() * (max - min + 1) + min);
197     };
198     $(&#39;#captchaOperation&#39;).html([randomNumber(1, 100), &#39;+&#39;, randomNumber(1, 200), &#39;=&#39;].join(&#39; &#39;));
199 
200     $(&#39;#defaultForm&#39;).bootstrapValidator({
201 //        live: &#39;disabled&#39;,
202         message: &#39;This value is not valid&#39;,
203         feedbackIcons: {
204             valid: &#39;glyphicon glyphicon-ok&#39;,
205             invalid: &#39;glyphicon glyphicon-remove&#39;,
206             validating: &#39;glyphicon glyphicon-refresh&#39;
207         },
208         fields: {
209             firstName: {
210                 validators: {
211                     notEmpty: {
212                         message: &#39;The first name is required and cannot be empty&#39;
213                     }
214                 }
215             },
216             lastName: {
217                 validators: {
218                     notEmpty: {
219                         message: &#39;The last name is required and cannot be empty&#39;
220                     }
221                 }
222             },
223             username: {
224                 message: &#39;The username is not valid&#39;,
225                 validators: {
226                     notEmpty: {
227                         message: &#39;The username is required and cannot be empty&#39;
228                     },
229                     stringLength: {
230                         min: 6,
231                         max: 30,
232                         message: &#39;The username must be more than 6 and less than 30 characters long&#39;
233                     },
234                     regexp: {
235                         regexp: /^[a-zA-Z0-9_\.]+$/,
236                         message: &#39;The username can only consist of alphabetical, number, dot and underscore&#39;
237                     },
238                     remote: {
239                         url: &#39;remote.php&#39;,
240                         message: &#39;The username is not available&#39;
241                     },
242                     different: {
243                         field: &#39;password&#39;,
244                         message: &#39;The username and password cannot be the same as each other&#39;
245                     }
246                 }
247             },
248             email: {
249                 validators: {
250                     emailAddress: {
251                         message: &#39;The input is not a valid email address&#39;
252                     }
253                 }
254             },
255             password: {
256                 validators: {
257                     notEmpty: {
258                         message: &#39;The password is required and cannot be empty&#39;
259                     },
260                     identical: {
261                         field: &#39;confirmPassword&#39;,
262                         message: &#39;The password and its confirm are not the same&#39;
263                     },
264                     different: {
265                         field: &#39;username&#39;,
266                         message: &#39;The password cannot be the same as username&#39;
267                     }
268                 }
269             },
270             confirmPassword: {
271                 validators: {
272                     notEmpty: {
273                         message: &#39;The confirm password is required and cannot be empty&#39;
274                     },
275                     identical: {
276                         field: &#39;password&#39;,
277                         message: &#39;The password and its confirm are not the same&#39;
278                     },
279                     different: {
280                         field: &#39;username&#39;,
281                         message: &#39;The password cannot be the same as username&#39;
282                     }
283                 }
284             },
285             birthday: {
286                 validators: {
287                     date: {
288                         format: &#39;YYYY/MM/DD&#39;,
289                         message: &#39;The birthday is not valid&#39;
290                     }
291                 }
292             },
293             gender: {
294                 validators: {
295                     notEmpty: {
296                         message: &#39;The gender is required&#39;
297                     }
298                 }
299             },
300             &#39;languages[]&#39;: {
301                 validators: {
302                     notEmpty: {
303                         message: &#39;Please specify at least one language you can speak&#39;
304                     }
305                 }
306             },
307             &#39;programs[]&#39;: {
308                 validators: {
309                     choice: {
310                         min: 2,
311                         max: 4,
312                         message: &#39;Please choose 2 - 4 programming languages you are good at&#39;
313                     }
314                 }
315             },
316             captcha: {
317                 validators: {
318                     callback: {
319                         message: &#39;Wrong answer&#39;,
320                         callback: function(value, validator) {
321                             var items = $(&#39;#captchaOperation&#39;).html().split(&#39; &#39;), sum = parseInt(items[0]) + parseInt(items[2]);
322                             return value == sum;
323                         }
324                     }
325                 }
326             }
327         }
328     });
329 
330     // Validate the form manually
331     $(&#39;#validateBtn&#39;).click(function() {
332         $(&#39;#defaultForm&#39;).bootstrapValidator(&#39;validate&#39;);
333     });
334 
335     $(&#39;#resetBtn&#39;).click(function() {
336         $(&#39;#defaultForm&#39;).data(&#39;bootstrapValidator&#39;).resetForm(true);
337     });
338 });
339 </script>
340 </body>
341 </html>

看331行，點擊提交時，用

$(&#39;#defaultForm&#39;).bootstrapValidator(&#39;validate&#39;);

觸發表單驗證

下面是碰到的一個坑：

bootstrapValidator預設邏輯是當表單驗證失敗時，把按鈕變成灰色。
但是專案中，button並不在form內部，是透過事件綁定來ajax提交的。那麼問題來了：

專案需要當form驗證失敗時，不執行所綁定的後續事件。百度半天找不到相關資料，最後還是要靠google：

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

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

});

醬紫就可以判斷表單驗證是否通過了。

以上是Bootstrap如何使用表單驗證外掛bootstrapValidator？（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles