如何使用bootstrap-Validator校驗表單

# 如何使用Bootstrap-Validator校驗表單

在Web開發中，表單驗證是保證數據有效性的重要環節。Bootstrap-Validator是一個基于jQuery和Bootstrap的表單驗證插件，它能夠快速實現客戶端驗證功能。本文將介紹如何集成和使用該插件。

---

## 一、環境準備

首先確保項目中已引入以下依賴（版本可調整）：

```html
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Bootstrap-Validator插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

二、基本使用步驟

1. HTML結構

創建需要驗證的表單，為每個字段添加name屬性和錯誤提示容器：

<form id="demoForm">
  <div class="mb-3">
    <label class="form-label">用戶名</label>
    <input type="text" name="username" class="form-control">
    <div class="invalid-feedback"></div>
  </div>
  
  <div class="mb-3">
    <label class="form-label">郵箱</label>
    <input type="email" name="email" class="form-control">
    <div class="invalid-feedback"></div>
  </div>
</form>

2. 初始化驗證器

通過JavaScript配置驗證規則：

$(document).ready(function() {
  $('#demoForm').bootstrapValidator({
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: '用戶名不能為空'
          },
          stringLength: {
            min: 3,
            max: 10,
            message: '長度需在3-10個字符之間'
          }
        }
      },
      email: {
        validators: {
          notEmpty: {
            message: '郵箱不能為空'
          },
          emailAddress: {
            message: '請輸入有效的郵箱地址'
          }
        }
      }
    }
  });
});

三、常用驗證規則

四、高級功能

1. 自定義驗證器

$.fn.bootstrapValidator.validators.customValidator = {
  validate: function(validator, $field, options) {
    return {
      valid: $field.val() === '示例值',
      message: '輸入值必須為"示例值"'
    };
  }
};

2. 事件處理

$('#demoForm')
  .on('success.form.bv', function(e) {
    e.preventDefault();
    alert('表單驗證通過！');
  });

五、注意事項

1. 確保所有驗證字段都有name屬性
2. 錯誤提示容器建議使用Bootstrap的invalid-feedback類
3. 服務端仍需做二次驗證
4. 插件默認在輸入時實時驗證，可通過live: 'disabled'關閉

通過以上步驟，你可以快速為Bootstrap表單添加健壯的驗證功能。完整文檔參考官方GitHub倉庫。 “`