欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Bootstrap表单验证插件bootstrapValidator使用方法整理

程序员文章站 2022-07-02 14:10:17
插件下载:http://www.jq22.com/jquery-info522 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangcong/p/5335 ......

插件下载:

插件介绍

先上一个图:

Bootstrap表单验证插件bootstrapValidator使用方法整理
Bootstrap表单验证插件bootstrapValidator使用方法整理

 

下载地址: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     <div class="container">
 18         <div class="row">
 19             <!-- form: -->
 20             <section>
 21                 <div class="col-lg-8 col-lg-offset-2">
 22                     <div class="page-header">
 23                         <h2>sign up</h2>
 24                     </div>
 25 
 26                     <form id="defaultform" method="post" class="form-horizontal" action="target.php">
 27                         <div class="form-group">
 28                             <label class="col-lg-3 control-label">full name</label>
 29                             <div class="col-lg-4">
 30                                 <input type="text" class="form-control" name="firstname" placeholder="first name" />
 31                             </div>
 32                             <div class="col-lg-4">
 33                                 <input type="text" class="form-control" name="lastname" placeholder="last name" />
 34                             </div>
 35                         </div>
 36 
 37                         <div class="form-group">
 38                             <label class="col-lg-3 control-label">username</label>
 39                             <div class="col-lg-5">
 40                                 <input type="text" class="form-control" name="username" />
 41                             </div>
 42                         </div>
 43 
 44                         <div class="form-group">
 45                             <label class="col-lg-3 control-label">email address</label>
 46                             <div class="col-lg-5">
 47                                 <input type="text" class="form-control" name="email" />
 48                             </div>
 49                         </div>
 50 
 51                         <div class="form-group">
 52                             <label class="col-lg-3 control-label">password</label>
 53                             <div class="col-lg-5">
 54                                 <input type="password" class="form-control" name="password" />
 55                             </div>
 56                         </div>
 57 
 58                         <div class="form-group">
 59                             <label class="col-lg-3 control-label">retype password</label>
 60                             <div class="col-lg-5">
 61                                 <input type="password" class="form-control" name="confirmpassword" />
 62                             </div>
 63                         </div>
 64 
 65                         <div class="form-group">
 66                             <label class="col-lg-3 control-label">gender</label>
 67                             <div class="col-lg-5">
 68                                 <div class="radio">
 69                                     <label>
 70                                         <input type="radio" name="gender" value="male" /> male
 71                                     </label>
 72                                 </div>
 73                                 <div class="radio">
 74                                     <label>
 75                                         <input type="radio" name="gender" value="female" /> female
 76                                     </label>
 77                                 </div>
 78                                 <div class="radio">
 79                                     <label>
 80                                         <input type="radio" name="gender" value="other" /> other
 81                                     </label>
 82                                 </div>
 83                             </div>
 84                         </div>
 85 
 86                         <div class="form-group">
 87                             <label class="col-lg-3 control-label">birthday</label>
 88                             <div class="col-lg-5">
 89                                 <input type="text" class="form-control" name="birthday" /> (yyyy/mm/dd)
 90                             </div>
 91                         </div>
 92 
 93                         <div class="form-group">
 94                             <label class="col-lg-3 control-label">languages</label>
 95                             <div class="col-lg-5">
 96                                 <div class="checkbox">
 97                                     <label>
 98                                         <input type="checkbox" name="languages[]" value="english" /> english
 99                                     </label>
100                                 </div>
101                                 <div class="checkbox">
102                                     <label>
103                                         <input type="checkbox" name="languages[]" value="french" /> french
104                                     </label>
105                                 </div>
106                                 <div class="checkbox">
107                                     <label>
108                                         <input type="checkbox" name="languages[]" value="german" /> german
109                                     </label>
110                                 </div>
111                                 <div class="checkbox">
112                                     <label>
113                                         <input type="checkbox" name="languages[]" value="russian" /> russian
114                                     </label>
115                                 </div>
116                                 <div class="checkbox">
117                                     <label>
118                                         <input type="checkbox" name="languages[]" value="other" /> other
119                                     </label>
120                                 </div>
121                             </div>
122                         </div>
123 
124                         <div class="form-group">
125                             <label class="col-lg-3 control-label">programming languages</label>
126                             <div class="col-lg-5">
127                                 <div class="checkbox">
128                                     <label>
129                                         <input type="checkbox" name="programs[]" value="net" /> .net
130                                     </label>
131                                 </div>
132                                 <div class="checkbox">
133                                     <label>
134                                         <input type="checkbox" name="programs[]" value="java" /> java
135                                     </label>
136                                 </div>
137                                 <div class="checkbox">
138                                     <label>
139                                         <input type="checkbox" name="programs[]" value="c" /> c/c++
140                                     </label>
141                                 </div>
142                                 <div class="checkbox">
143                                     <label>
144                                         <input type="checkbox" name="programs[]" value="php" /> php
145                                     </label>
146                                 </div>
147                                 <div class="checkbox">
148                                     <label>
149                                         <input type="checkbox" name="programs[]" value="perl" /> perl
150                                     </label>
151                                 </div>
152                                 <div class="checkbox">
153                                     <label>
154                                         <input type="checkbox" name="programs[]" value="ruby" /> ruby
155                                     </label>
156                                 </div>
157                                 <div class="checkbox">
158                                     <label>
159                                         <input type="checkbox" name="programs[]" value="python" /> python
160                                     </label>
161                                 </div>
162                                 <div class="checkbox">
163                                     <label>
164                                         <input type="checkbox" name="programs[]" value="javascript" /> javascript
165                                     </label>
166                                 </div>
167                             </div>
168                         </div>
169 
170                         <div class="form-group">
171                             <label class="col-lg-3 control-label" id="captchaoperation"></label>
172                             <div class="col-lg-2">
173                                 <input type="text" class="form-control" name="captcha" />
174                             </div>
175                         </div>
176 
177                         <div class="form-group">
178                             <div 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                             </div>
184                         </div>
185                     </form>
186                 </div>
187             </section>
188             <!-- :form -->
189         </div>
190     </div>
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     $('#captchaoperation').html([randomnumber(1, 100), '+', randomnumber(1, 200), '='].join(' '));
199 
200     $('#defaultform').bootstrapvalidator({
201 //        live: 'disabled',
202         message: 'this value is not valid',
203         feedbackicons: {
204             valid: 'glyphicon glyphicon-ok',
205             invalid: 'glyphicon glyphicon-remove',
206             validating: 'glyphicon glyphicon-refresh'
207         },
208         fields: {
209             firstname: {
210                 validators: {
211                     notempty: {
212                         message: 'the first name is required and cannot be empty'
213                     }
214                 }
215             },
216             lastname: {
217                 validators: {
218                     notempty: {
219                         message: 'the last name is required and cannot be empty'
220                     }
221                 }
222             },
223             username: {
224                 message: 'the username is not valid',
225                 validators: {
226                     notempty: {
227                         message: 'the username is required and cannot be empty'
228                     },
229                     stringlength: {
230                         min: 6,
231                         max: 30,
232                         message: 'the username must be more than 6 and less than 30 characters long'
233                     },
234                     regexp: {
235                         regexp: /^[a-za-z0-9_\.]+$/,
236                         message: 'the username can only consist of alphabetical, number, dot and underscore'
237                     },
238                     remote: {
239                         url: 'remote.php',
240                         message: 'the username is not available'
241                     },
242                     different: {
243                         field: 'password',
244                         message: 'the username and password cannot be the same as each other'
245                     }
246                 }
247             },
248             email: {
249                 validators: {
250                     emailaddress: {
251                         message: 'the input is not a valid email address'
252                     }
253                 }
254             },
255             password: {
256                 validators: {
257                     notempty: {
258                         message: 'the password is required and cannot be empty'
259                     },
260                     identical: {
261                         field: 'confirmpassword',
262                         message: 'the password and its confirm are not the same'
263                     },
264                     different: {
265                         field: 'username',
266                         message: 'the password cannot be the same as username'
267                     }
268                 }
269             },
270             confirmpassword: {
271                 validators: {
272                     notempty: {
273                         message: 'the confirm password is required and cannot be empty'
274                     },
275                     identical: {
276                         field: 'password',
277                         message: 'the password and its confirm are not the same'
278                     },
279                     different: {
280                         field: 'username',
281                         message: 'the password cannot be the same as username'
282                     }
283                 }
284             },
285             birthday: {
286                 validators: {
287                     date: {
288                         format: 'yyyy/mm/dd',
289                         message: 'the birthday is not valid'
290                     }
291                 }
292             },
293             gender: {
294                 validators: {
295                     notempty: {
296                         message: 'the gender is required'
297                     }
298                 }
299             },
300             'languages[]': {
301                 validators: {
302                     notempty: {
303                         message: 'please specify at least one language you can speak'
304                     }
305                 }
306             },
307             'programs[]': {
308                 validators: {
309                     choice: {
310                         min: 2,
311                         max: 4,
312                         message: 'please choose 2 - 4 programming languages you are good at'
313                     }
314                 }
315             },
316             captcha: {
317                 validators: {
318                     callback: {
319                         message: 'wrong answer',
320                         callback: function(value, validator) {
321                             var items = $('#captchaoperation').html().split(' '), sum = parseint(items[0]) + parseint(items[2]);
322                             return value == sum;
323                         }
324                     }
325                 }
326             }
327         }
328     });
329 
330     // validate the form manually
331     $('#validatebtn').click(function() {
332         $('#defaultform').bootstrapvalidator('validate');
333     });
334 
335     $('#resetbtn').click(function() {
336         $('#defaultform').data('bootstrapvalidator').resetform(true);
337     });
338 });
339 </script>
340 </body>
341 </html>

  看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;

});

  

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