前端校验框架-Bootstrap Validator

来源：互联网发布：js 断点续传编辑：程序博客网时间：2024/06/08 10:45

平时如果做表单校验的时候,自己写会非常麻烦,推荐一个前端校验的框架 Bootstrap Validator

插件介绍

先上一个图：

下载地址：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" /> French104                                     </label>105                                 </div>106                                 <div class="checkbox">107                                     <label>108                                         <input type="checkbox" name="languages[]" value="german" /> German109                                     </label>110                                 </div>111                                 <div class="checkbox">112                                     <label>113                                         <input type="checkbox" name="languages[]" value="russian" /> Russian114                                     </label>115                                 </div>116                                 <div class="checkbox">117                                     <label>118                                         <input type="checkbox" name="languages[]" value="other" /> Other119                                     </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" /> .Net130                                     </label>131                                 </div>132                                 <div class="checkbox">133                                     <label>134                                         <input type="checkbox" name="programs[]" value="java" /> Java135                                     </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" /> PHP145                                     </label>146                                 </div>147                                 <div class="checkbox">148                                     <label>149                                         <input type="checkbox" name="programs[]" value="perl" /> Perl150                                     </label>151                                 </div>152                                 <div class="checkbox">153                                     <label>154                                         <input type="checkbox" name="programs[]" value="ruby" /> Ruby155                                     </label>156                                 </div>157                                 <div class="checkbox">158                                     <label>159                                         <input type="checkbox" name="programs[]" value="python" /> Python160                                     </label>161                                 </div>162                                 <div class="checkbox">163                                     <label>164                                         <input type="checkbox" name="programs[]" value="javascript" /> Javascript165                                     </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 captcha195     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 manually331     $('#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;});

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

1 0