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">Useame</label> 39 <div class="col-lg-5"> 40 <input type="text" class="form-control" name="useame" /> 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 retu 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 useame: {224 message: 'The useame is not valid',225 validators: {226 notEmpty: {227 message: 'The useame is required and cannot be empty'228 },229 stringLength: {230 min: 6,231 max: 30,232 message: 'The useame must be more than 6 and less than 30 characters long'233 },234 regexp: {235 regexp: /^[a-zA-Z0-9_\.]+$/,236 message: 'The useame can only consist of alphabetical, number, dot and underscore'237 },238 remote: {239 url: 'remote.php',240 message: 'The useame is not available'241 },242 different: {243 field: 'password',244 message: 'The useame 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: 'useame',266 message: 'The password cannot be the same as useame'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: 'useame',281 message: 'The password cannot be the same as useame'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 retu 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 retu;});
酱紫就可以判断表单验证是否通过了。
作者：暖风叔叔
来源链接：https://www.cnblogs.com/woodk/p/5546847.html
版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。
