快捷導(dǎo)航

jquery插件bootstrapValidator表單驗證詳解

更新時間：2016年12月15日 08:40:45 作者：sqq0103

這篇文章主要為大家詳細介紹了jquery插件bootstrapValidator表單驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Bootstrap Validator是為Bootstrap3設(shè)計的一款表單驗證jQuery插件，非常適合基于Bootstrap框架的網(wǎng)站。
看作者的github，這款插件已經(jīng)不再更新了，而推薦使用FormValidation，不過現(xiàn)在還是先介紹一下BootstrapValidator的使用。

準備工作

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

下載源碼后，將其中的bootstrapValidator.min.css和bootstapValidator.min.js導(dǎo)入項目，并在頁面中引入這些組件，如下：

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

其中path是對應(yīng)文件導(dǎo)入項目的路徑

簡單應(yīng)用

文檔中給出調(diào)用插件的方法是：

$(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>

對于上面這個表單應(yīng)用BootstrapValidator非常簡單，fieldName 對應(yīng)表單中每一項的 name 屬性，然后BV還內(nèi)置了很多 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: '密碼只能由字母、數(shù)字組成~'
 }
 }
 }
 }
 });
});

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

注：圖中的注冊按鈕處于禁用狀態(tài)

下面再介紹一下fields的 selector，因為表單數(shù)據(jù)往往是屬于某一個注冊用戶所有，為方便與后臺進行數(shù)據(jù)交互，我們往往按如下的形式設(shè)置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>

對應(yīng)的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: '密碼只能由字母、數(shù)字組成~'
 }
 }
 }
 }
 });
});

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