Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

时间：2021-05-28

本文给大家介绍如何判断表单验证的实例代码，在没给大家介绍正文之前，先给大家介绍下插件。

插件介绍

先上一个图：


下载地址：https://github.com/nghuuphuoc/bootstrapvalidator

使用提示

中文化：

下载插件后，将\js\bootstrapValidator\language\zh_CN.js 引入文件，即实现中文化

提交前验证表单：

更丰富一点的表单验证例子：http:///font-awesome/../css/font-awesome.css" />--><script type="text/javascript" src="vendor/jquery/jquery-...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- col-lg-offset-"><div class="page-header"><h>Sign up</h></div><form id="defaultForm" method="post" class="form-horizontal" action="target.php"><div class="form-group"><label class="col-lg- control-label">Full name</label><div class="col-lg-"><input type="text" class="form-control" name="firstName" placeholder="First name" /></div><div class="col-lg-"><input type="text" class="form-control" name="lastName" placeholder="Last name" /></div></div><div class="form-group"><label class="col-lg- control-label">Username</label><div class="col-lg-"><input type="text" class="form-control" name="username" /></div></div><div class="form-group"><label class="col-lg- control-label">Email address</label><div class="col-lg-"><input type="text" class="form-control" name="email" /></div></div><div class="form-group"><label class="col-lg- control-label">Password</label><div class="col-lg-"><input type="password" class="form-control" name="password" /></div></div><div class="form-group"><label class="col-lg- control-label">Retype password</label><div class="col-lg-"><input type="password" class="form-control" name="confirmPassword" /></div></div><div class="form-group"><label class="col-lg- control-label">Gender</label><div class="col-lg-"><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- control-label">Birthday</label><div class="col-lg-"><input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)</div></div><div class="form-group"><label class="col-lg- control-label">Languages</label><div class="col-lg-"><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- control-label">Programming Languages</label><div class="col-lg-"><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 captchafunction 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[]) + parseInt(items[]);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;});

以上所述是小编给大家介绍的Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章