表單驗證是前端開發中確保用戶輸入數據合法性的關鍵步驟。無論是註冊賬號、填寫訂單信息還是提交評論，合理的表單驗證能減少無效數據提交，提升用戶體驗。Bootstrap5 作爲流行的前端框架，提供了強大且易用的表單驗證功能，讓我們無需編寫大量 JavaScript 代碼就能實現基礎的表單校驗。本文將通過簡單易懂的步驟，帶你快速掌握 Bootstrap5 表單驗證的核心用法。
一、準備工作：引入 Bootstrap5¶
首先，在 HTML 文件中引入 Bootstrap5 的 CSS 和 JavaScript 文件（表單驗證的即時反饋和交互可能需要 JS 支持）。通過 CDN 方式引入最簡單，只需在 <head> 和 </body> 中添加以下代碼：
<!-- 引入 Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入 Bootstrap5 JS（含 Popper.js，用於下拉菜單等組件） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
二、基礎表單驗證：HTML5 屬性 + Bootstrap 類¶
Bootstrap5 表單驗證的核心是結合 HTML5 表單屬性（如 required、type）和 Bootstrap 內置類（如 form-control、invalid-feedback）實現。以下是一個完整的註冊表單示例，包含郵箱、密碼、確認密碼、年齡等字段：
<form id="registrationForm" class="needs-validation" novalidate>
<!-- 電子郵箱 -->
<div class="mb-3">
<label for="email" class="form-label">電子郵箱</label>
<input type="email" class="form-control" id="email"
placeholder="your@email.com" required>
<div class="invalid-feedback">請輸入有效的電子郵箱地址</div>
</div>
<!-- 密碼 -->
<div class="mb-3">
<label for="password" class="form-label">密碼</label>
<input type="password" class="form-control" id="password"
minlength="8" required>
<div class="invalid-feedback">密碼長度不能少於 8 個字符</div>
</div>
<!-- 確認密碼 -->
<div class="mb-3">
<label for="confirmPassword" class="form-label">確認密碼</label>
<input type="password" class="form-control" id="confirmPassword" required>
<div class="invalid-feedback">兩次密碼輸入不一致</div>
</div>
<!-- 年齡 -->
<div class="mb-3">
<label for="age" class="form-label">年齡</label>
<input type="number" class="form-control" id="age"
min="18" max="120" required>
<div class="invalid-feedback">年齡必須在 18-120 之間</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
關鍵屬性與類說明：¶
needs-validation：標記表單爲“需要驗證”，默認在點擊提交按鈕時觸發驗證。novalidate：禁用瀏覽器默認的 HTML5 驗證（避免與 Bootstrap 衝突）。required：字段爲必填項，未填寫則驗證失敗。type="email"/type="password"/type="number"：email：自動驗證格式（如包含@和域名）。number：結合min/max限制數值範圍（如年齡 18-120）。password：無特殊格式驗證，僅限制長度（需配合minlength）。form-control：Bootstrap 提供的輸入框基礎樣式，確保輸入框美觀且響應式。invalid-feedback：錯誤提示容器，驗證失敗時顯示紅色邊框和錯誤文字。
三、驗證狀態與反饋¶
表單驗證成功或失敗時，Bootstrap 會自動爲輸入框添加 is-valid（成功）或 is-invalid（錯誤）類，配合 invalid-feedback 顯示提示。
- 成功狀態：輸入符合規則時，輸入框顯示綠色邊框，錯誤提示隱藏。
- 錯誤狀態：輸入不符合規則時，輸入框顯示紅色邊框，
invalid-feedback內容顯示。
四、即時驗證（輸入時觸發）¶
默認情況下，驗證僅在點擊提交按鈕時觸發。若需實現“輸入時即時驗證”，需通過 JavaScript 監聽輸入事件：
<script>
document.addEventListener('DOMContentLoaded', function() {
const forms = document.querySelectorAll('.needs-validation');
forms.forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault(); // 阻止提交
event.stopPropagation(); // 停止事件冒泡
}
form.classList.add('was-validated'); // 顯示所有驗證結果
}, false);
// 即時驗證示例：確認密碼
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
confirmPassword.addEventListener('input', () => {
if (password.value !== confirmPassword.value) {
confirmPassword.classList.add('is-invalid');
confirmPassword.setCustomValidity('兩次密碼輸入不一致');
} else {
confirmPassword.classList.remove('is-invalid');
confirmPassword.setCustomValidity(''); // 清空錯誤信息
}
});
});
});
</script>
核心方法說明：¶
form.checkValidity()：檢查表單是否符合規則，返回true（通過）或false（不通過）。form.classList.add('was-validated')：強制顯示所有驗證結果（即使未提交）。setCustomValidity('錯誤信息')：自定義錯誤提示（需手動清空爲''以重置狀態）。
五、常見問題與解決方案¶
- 驗證不生效：檢查是否遺漏
needs-validation或novalidate屬性。 - 即時驗證無反應：確認 JavaScript 代碼中已正確監聽輸入事件（如
input）。 - 錯誤提示不顯示：確保
invalid-feedback內容不爲空，且輸入框有is-invalid類。 - 樣式錯亂：檢查是否正確引入 Bootstrap CSS 和 JS 文件，或是否覆蓋了內置樣式。
六、總結¶
Bootstrap5 表單驗證通過 HTML5 原生屬性 + 內置 CSS 類 + 簡單 JavaScript 實現，無需複雜代碼即可完成基礎校驗。核心步驟：
1. 引入 Bootstrap CSS/JS。
2. 用 needs-validation 和 novalidate 標記表單。
3. 用 required、type、minlength 等屬性定義規則。
4. 用 invalid-feedback 顯示錯誤提示。
5. 必要時用 JavaScript 增強即時驗證和自定義邏輯。
通過以上步驟，你可以快速實現健壯的前端表單驗證，提升用戶體驗和數據質量。