使用Bootstrap Validator實現表單實時驗證功能

在Web開發中，表單驗證是非常常見的一種需求。而使用Bootstrap Validator可以很方便地實現表單實時驗證功能。本文將從以下幾個方面詳細闡述Bootstrap Validator的使用。

一、表單標記

要使用Bootstrap Validator，我們需要在HTML中引入相應的代碼庫。可以從Bootstrap Validator的GitHub主頁下載代碼庫，或者使用CDN進行引入。以下是一個基本的表單標記的例子：

<form id="myForm" method="post">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" name="name" id="name" required>
  </div>
  
  <div class="form-group">
    <label for="email">郵箱</label>
    <input type="email" class="form-control" name="email" id="email" required>
  </div>
  
  <div class="form-group">
    <label for="password">密碼</label>
    <input type="password" class="form-control" name="password" id="password" minlength="6" required>
  </div>
  
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在上面的例子中，我們定義了一個名為「myForm」的表單，並在表單中加入了三個欄位：姓名、郵箱和密碼。其中姓名和郵箱是必填欄位，密碼長度必須大於等於6個字元。提交按鈕使用了Bootstrap的樣式。現在我們需要對這些欄位進行實時驗證。

二、驗證規則

Bootstrap Validator使用的是自定義HTML5屬性來設置驗證規則。以下是一些常用的驗證規則：

• required：必填欄位
• email：郵箱格式
• url：URL格式
• number：數字格式
• date：日期格式
• minlength：最小長度
• maxlength：最大長度
• regexp：正則表達式

在上面的表單中，我們已經使用了required和minlength兩個規則。如果需要添加其他規則，可以使用data-*屬性來實現。例如，我們需要對郵箱地址進行伺服器端校驗：

<div class="form-group">
  <label for="email">郵箱</label>
  <input type="email" class="form-control" name="email" id="email"
         data-remote="/check-email" data-type="json" required>
  <div class="help-block with-errors"></div>
</div>

在這裡，我們添加了data-remote屬性，並將其設為伺服器端的校驗URL。同時，我們還設置了data-type屬性，告訴Bootstrap Validator伺服器返回的是JSON格式的數據。在標記中，我們也添加了一個help-block元素，用於顯示驗證錯誤信息。

三、初始化

一旦我們定義了表單和規則，接下來就需要初始化Bootstrap Validator。我們需要在表單元素周圍包裹一個元素，並設置data-toggle=”validator”屬性。我們還可以添加其他選項，例如設置錯誤容器的元素（默認為input元素後面的兄弟元素），或者在提交表單時禁用按鈕：

<form id="myForm" method="post">
  <div class="form-group" data-toggle="validator"
       data-disable="false" data-errors-container="#error-container">
    <label for="name">姓名</label>
    <input type="text" class="form-control" name="name" id="name" required>
  </div>
  
  <div class="form-group" data-toggle="validator">
    <label for="email">郵箱</label>
    <input type="email" class="form-control" name="email" id="email"
           data-remote="/check-email" data-type="json" required>
    <div class="help-block with-errors"></div>
  </div>
  
  <div class="form-group" data-toggle="validator">
    <label for="password">密碼</label>
    <input type="password" class="form-control" name="password" id="password"
           minlength="6" required>
  </div>
  
  <button type="submit" class="btn btn-primary">提交</button>
  
  <div id="error-container"></div>
</form>

在JavaScript中，我們可以使用jQuery選擇器來選中表單，並初始化Bootstrap Validator。以下是一個例子：

$('#myForm').validator({
  // 設置驗證錯誤信息的容器
  errorsContainer: '#error-container',
  
  // 提交表單時是否禁用按鈕
  disable: false,

  // 自定義錯誤提示信息
  messages: {
    required: '該欄位為必填欄位',
    minlength: '該欄位長度必須大於{0}',
    remote: '該欄位已存在'
  },

  // 自定義驗證規則
  custom: {
    // 判斷手機號碼是否合法
    phone: function($el) {
      var phone = $el.val();
      return /^\d{11}$/.test(phone);
    }
  }
});

在上面的例子中，我們使用了以下選項：

• errorsContainer：設置驗證錯誤信息的容器。
• disable：提交表單時是否禁用按鈕。
• messages：自定義驗證錯誤提示信息。
• custom：自定義驗證規則。

四、實時驗證

一旦我們初始化了Bootstrap Validator，表單中的欄位就會被實時驗證。例如，在上面的表單中，如果用戶名為空或者密碼長度小於6個字元，提交按鈕就會被禁用，並且提示錯誤信息。如果郵箱地址已經被佔用，也會顯示相應的錯誤提示。

在驗證過程中，Bootstrap Validator會自動顯示錯誤信息。對於每個欄位，它會顯示相應的幫助塊元素，並添加錯誤樣式。如果驗證通過，則會隱藏幫助塊元素，並移除錯誤樣式。我們可以通過CSS來自定義錯誤樣式：

.has-error .help-block {
  color: #a94442;
}
.has-error input {
  border-color: #a94442;
}

在上面的CSS中，我們定義了.has-error class，用於顯示錯誤樣式。如果一個元素包含了這個class，它會顯示紅色邊框和紅色文字。

五、總結

使用Bootstrap Validator可以輕鬆實現實時表單驗證功能。我們需要定義表單和驗證規則，然後初始化Bootstrap Validator。在實時驗證過程中，Bootstrap Validator會自動顯示錯誤信息。我們可以使用CSS來自定義錯誤樣式。最後，可以根據實際需求添加自定義驗證規則和錯誤提示信息。