首頁 > 開發者 > JavaScript
Bootstrap中的表單驗證外掛程式bootstrapValidator使用方法整理（推薦），validator表單驗證
本文給大家介紹如何判斷表單驗證的執行個體代碼，在沒給大家介紹本文之前，先給大家介紹下外掛程式。
外掛程式介紹
先上一個圖：
：https://github.com/nghuuphuoc/bootstrapvalidator
使用提示
中文化：
下載外掛程式後，將\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/../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使用方法整理（推薦）的相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
