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，直接上代码：

 <!DOCTYPE html>
 <html>
 <head>
     <title>BootstrapValidator demo</title>

     <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
     <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>

     <!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
     <!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->

     <script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
 </head>
 <body>
     <div class="container">
         <div class="row">
             <!-- form: -->
             <section>
                 <div class="col-lg-8 col-lg-offset-2">
                     <div class="page-header">
                         <h2>Sign up</h2>
                     </div>

                     <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                         <div class="form-group">
                             <label class="col-lg-3 control-label">Full name</label>
                             <div class="col-lg-4">
                                 <input type="text" class="form-control" name="firstName" placeholder="First name" />
                             </div>
                             <div class="col-lg-4">
                                 <input type="text" class="form-control" name="lastName" placeholder="Last name" />
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-lg-3 control-label">Username</label>
                             <div class="col-lg-5">
                                 <input type="text" class="form-control" name="username" />
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-lg-3 control-label">Email address</label>
                             <div class="col-lg-5">
                                 <input type="text" class="form-control" name="email" />
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-lg-3 control-label">Password</label>
                             <div class="col-lg-5">
                                 <input type="password" class="form-control" name="password" />
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-lg-3 control-label">Retype password</label>
                             <div class="col-lg-5">
                                 <input type="password" class="form-control" name="confirmPassword" />
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-lg-3 control-label">Gender</label>
                             <div class="col-lg-5">
                                 <div class="radio">
                                     <label>
                                         <input type="radio" name="gender" value="male" /> Male
                                     </label>
                                 </div>
                                 <div class="radio">
                                     <label>
                                         <input type="radio" name="gender" value="female" /> Female
                                     </label>
                                 </div>
                                 <div class="radio">
                                     <label>
                                         <input type="radio" name="gender" value="other" /> Other
                                     </label>
                                 </div>
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-lg-3 control-label">Birthday</label>
                             <div class="col-lg-5">
                                 <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-lg-3 control-label">Languages</label>
                             <div class="col-lg-5">
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="languages[]" value="english" /> English
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="languages[]" value="french" /> French
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="languages[]" value="german" /> German
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="languages[]" value="russian" /> Russian
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="languages[]" value="other" /> Other
                                     </label>
                                 </div>
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-lg-3 control-label">Programming Languages</label>
                             <div class="col-lg-5">
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="programs[]" value="net" /> .Net
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="programs[]" value="java" /> Java
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="programs[]" value="c" /> C/C++
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="programs[]" value="php" /> PHP
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="programs[]" value="perl" /> Perl
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="programs[]" value="ruby" /> Ruby
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="programs[]" value="python" /> Python
                                     </label>
                                 </div>
                                 <div class="checkbox">
                                     <label>
                                         <input type="checkbox" name="programs[]" value="javascript" /> Javascript
                                     </label>
                                 </div>
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-lg-3 control-label" id="captchaOperation"></label>
                             <div class="col-lg-2">
                                 <input type="text" class="form-control" name="captcha" />
                             </div>
                         </div>

                         <div class="form-group">
                             <div class="col-lg-9 col-lg-offset-3">
                                 <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
                                 <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button>
                                 <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
                                 <button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
                             </div>
                         </div>
                     </form>
                 </div>
             </section>
             <!-- :form -->
         </div>
     </div>

 <script type="text/javascript">
 $(document).ready(function() {
     // Generate a simple captcha
     function randomNumber(min, max) {
         return Math.floor(Math.random() * (max - min + 1) + min);
     };
     $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

     $('#defaultForm').bootstrapValidator({
 //        live: 'disabled',
         message: 'This value is not valid',
         feedbackIcons: {
             valid: 'glyphicon glyphicon-ok',
             invalid: 'glyphicon glyphicon-remove',
             validating: 'glyphicon glyphicon-refresh'
         },
         fields: {
             firstName: {
                 validators: {
                     notEmpty: {
                         message: 'The first name is required and cannot be empty'
                     }
                 }
             },
             lastName: {
                 validators: {
                     notEmpty: {
                         message: 'The last name is required and cannot be empty'
                     }
                 }
             },
             username: {
                 message: 'The username is not valid',
                 validators: {
                     notEmpty: {
                         message: 'The username is required and cannot be empty'
                     },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: 'The username must be more than 6 and less than 30 characters long'
                     },
                     regexp: {
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: 'The username can only consist of alphabetical, number, dot and underscore'
                     },
                     remote: {
                         url: 'remote.php',
                         message: 'The username is not available'
                     },
                     different: {
                         field: 'password',
                         message: 'The username and password cannot be the same as each other'
                     }
                 }
             },
             email: {
                 validators: {
                     emailAddress: {
                         message: 'The input is not a valid email address'
                     }
                 }
             },
             password: {
                 validators: {
                     notEmpty: {
                         message: 'The password is required and cannot be empty'
                     },
                     identical: {
                         field: 'confirmPassword',
                         message: 'The password and its confirm are not the same'
                     },
                     different: {
                         field: 'username',
                         message: 'The password cannot be the same as username'
                     }
                 }
             },
             confirmPassword: {
                 validators: {
                     notEmpty: {
                         message: 'The confirm password is required and cannot be empty'
                     },
                     identical: {
                         field: 'password',
                         message: 'The password and its confirm are not the same'
                     },
                     different: {
                         field: 'username',
                         message: 'The password cannot be the same as username'
                     }
                 }
             },
             birthday: {
                 validators: {
                     date: {
                         format: 'YYYY/MM/DD',
                         message: 'The birthday is not valid'
                     }
                 }
             },
             gender: {
                 validators: {
                     notEmpty: {
                         message: 'The gender is required'
                     }
                 }
             },
             'languages[]': {
                 validators: {
                     notEmpty: {
                         message: 'Please specify at least one language you can speak'
                     }
                 }
             },
             'programs[]': {
                 validators: {
                     choice: {
                         min: 2,
                         max: 4,
                         message: 'Please choose 2 - 4 programming languages you are good at'
                     }
                 }
             },
             captcha: {
                 validators: {
                     callback: {
                         message: 'Wrong answer',
                         callback: function(value, validator) {
                             var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                             return value == sum;
                         }
                     }
                 }
             }
         }
     });

     // Validate the form manually
     $('#validateBtn').click(function() {
         $('#defaultForm').bootstrapValidator('validate');
     });

     $('#resetBtn').click(function() {
         $('#defaultForm').data('bootstrapValidator').resetForm(true);
     });
 });
 </script>
 </body>
 </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;

});

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