本文給大家介紹如何判斷表單驗證的實例代碼,在沒給大家介紹正文之前,先給大家介紹下插件。
插件介紹
先上一個圖:
下載地址: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 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[]) + 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使用方法整理(推薦)的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!