DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jquery插件bootstrapValidator表單驗證詳解
jquery插件bootstrapValidator表單驗證詳解
編輯:JQuery入門技巧     

Bootstrap Validator是為Bootstrap3設計的一款表單驗證jQuery插件,非常適合基於Bootstrap框架的網站。
看作者的github,這款插件已經不再更新了,而推薦使用FormValidation,不過現在還是先介紹一下BootstrapValidator的使用。

准備工作

BootstrapValidator文檔地址:http://bv.doc.javake.cn/

下載源碼後,將其中的bootstrapValidator.min.css和bootstapValidator.min.js導入項目,並在頁面中引入這些組件,如下:

<link rel="stylesheet" type="text/css" href="path/bootstrapValidator.min.css">
<script type="text/javascript" src="path/bootstrapValidator.min.js"></script>

其中path是對應文件導入項目的路徑

簡單應用

文檔中給出調用插件的方法是:

$(document).ready(function() {
 $(formSelector).bootstrapValidator({
 excluded: ...,
 feedbackIcons: ...,
 live: 'enabled',
 message: 'This value is not valid',
 submitButtons: 'button[type="submit"]',
 submitHandler: null,
 trigger: null,
 fields: {
  <fieldName>: {
  enabled: true,
  message: 'This value is not valid',
  container: null,
  selector: null,
  trigger: null,
  // Map the validator name with its options
  validators: {
   ...
   <validatorName>: <validatorOptions>
   ...
  }
  }
  ...
 }
 });
});

下面針對一個簡單的表單來進行說明:

<form id="logForm" class="form-horizontal">
 <div class="form-group">
 <label class="col-lg-3 control-label">用戶名</label>
 <div class="col-lg-5">
  <input type="text" class="form-control" name="username" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-lg-3 control-label">郵箱</label>
 <div class="col-lg-5">
  <input type="text" class="form-control" name="email" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-lg-3 control-label">密碼</label>
 <div class="col-lg-5">
  <input type="password" class="form-control" name="password" />
 </div>
 </div>
 <button type="submit" class="btn btn-md">提交</button>
</form>

對於上面這個表單應用BootstrapValidator非常簡單,fieldName 對應表單中每一項的 name 屬性,然後BV還內置了很多 validator 供用戶選擇,詳細可參考文檔的 validators 部分,可以看到,郵箱格式的驗證正是其中之一,不需要用戶自己寫正則了。

$(document).ready(function() {
 $('#signup-form').bootstrapValidator({
 fields: {
  username: {
  validators: {
   notEmpty: {
   message: '用戶名不能為空'
   },
   stringLength: {
   min: 3,
   max: 6,
   message: '用戶名只能在3-6個字符之間哦~'
   }
  }
  },
  email: {
  validators: {
   emailAddress: {
   message: '郵箱格式有誤'
   }
  }
  },
  password: {
  validators: {
   notEmpty: {
   message: '密碼不能為空'
   },
   stringLength: {
   min: 6,
   max: 8,
   message: '密碼必須在6-8個字符之間~'
   },
   regexp: {
   regexp: /^[a-zA-Z0-9]+$/,
   message: '密碼只能由字母、數字組成~'
   }
  }
  }
 }
 });
}); 

不符合驗證要求時,會顯示錯誤提示的message,並且禁用提交按鈕,提示信息的顏色字體等等都可以重寫css來設置,效果展示如下:

注:圖中的注冊按鈕處於禁用狀態

下面再介紹一下fields的 selector,因為表單數據往往是屬於某一個注冊用戶所有,為方便與後台進行數據交互,我們往往按如下的形式設置name,這時候就不能直接利用name屬性來進行驗證了,而是使用selector來定義fields:

<form class="form-horizontal">
 <div class="form-group">
 <label class="col-lg-3 control-label">用戶名</label>
 <div class="col-lg-5">
  <input type="text" id="user" class="form-control" name="login_user.userName" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-lg-3 control-label">密碼</label>
 <div class="col-lg-5">
  <input type="password" id="pass" class="form-control" name="login_user.password" />
 </div>
 </div>
 <button type="submit" id="submitBtn" class="btn btn-md">提交</button>
</form>

對應的js代碼:

$(document).ready(function() {
 $('#signup-form').bootstrapValidator({
 fields: {
  user: {
  selector: '#user', 
  validators: {
   notEmpty: {
   message: '用戶名不能為空'
   },
   stringLength: {
   min: 3,
   max: 6,
   message: '用戶名只能在3-6個字符之間哦~'
   }
  }
  },
  pass: {
  selector: '#pass',
  validators: {
   notEmpty: {
   message: '密碼不能為空'
   },
   stringLength: {
   min: 6,
   max: 8,
   message: '密碼必須在6-8個字符之間~'
   },
   regexp: {
   regexp: /^[a-zA-Z0-9]+$/,
   message: '密碼只能由字母、數字組成~'
   }
  }
  }
 }
 });
}); 

如果你嫌棄這樣寫代碼累贅,可以直接應用相應的HTML屬性,詳細可參考文檔的 settings 部分

如果大家還想深入學習,可以點擊這裡進行學習,再為大家附3個精彩的專題:

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上只是BootstrapValidator的一個非常簡單的應用, 官方文檔 很詳細,感興趣的話就繼續查閱,來深入了解它的強大功能吧

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved