Bootstrap - 驗證：初學者的全面指南

你好，有抱負的網頁開發者們！今天，我們將要深入Bootstrap驗證的世界。作為你們友好的鄰居電腦老師，我非常高興能夠指導你們這次旅程。別擔心如果你是編程新手——我們會從基礎開始，逐步學習。在這個教學結束時，你將能像專家一樣驗證表單！

Bootstrap驗證是什麼？

在我們深入細節之前，讓我們先了解一下Bootstrap驗證到底是什麼。想像一下你在網上填寫表單時，不小心留空了一個必填字段。突然，表單會以紅色突出顯示那個字段，告訴你填寫它。那就是表單驗證的作用！我們可靠的前端工具包Bootstrap提供了內建的驗證功能，讓這個過程變得順暢且用戶友好。

自定風格

讓我們從表單驗證的自定風格開始。Bootstrap讓我們能夠為驗證過程添加自己的特色。以下是一個簡單的例子：

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">用戶名</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">
請選擇一個用戶名。
</div>
</div>
<button class="btn btn-primary" type="submit">提交表單</button>
</form>

在這個例子中，我們為我們的表單添加了needs-validation類，並設置novalidate以阻止默認的浏览器驗證。輸入字段上的required屬性告訴Bootstrap這個字段必須填寫。

現在，讓我們添加一些JavaScript來讓它工作：

(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();

這段JavaScript代碼為我們的表單添加事件监聽器，當表單被提交時检查有效性。如果表單無效，它將阻止提交並添加was-validated類，這會觸發我們的自定風格。

浏览器默認風格

有時候，你可能想要使用浏览器默認的驗證風格。這就像讓浏览器為你做重活！以下是如何操作的：

<form>
<div class="form-group">
<label for="email">電子郵件地址</label>
<input type="email" class="form-control" id="email" required>
</div>
<button class="btn btn-primary" type="submit">提交</button>
</form>

在這種情況下，我們移除了needs-validation類和novalidate屬性。浏览器將使用其默認風格來处理驗證。

服务器端驗證

雖然客户端驗證對於用戶體驗來說非常好，但我們應該總是實現服务器端驗證以確保安全性。以下是一個簡單的PHP例子：

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "無效的電子郵件格式";
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

這段PHP代碼检查提交的電子郵件是否有效。記住：永遠不要信任用戶輸入！

支持的元素

Bootstrap驗證支持各種表單元素。讓我們看看一些：

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">用戶名</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="country">國家</label>
<select class="form-control" id="country" required>
<option value="">選擇...</option>
<option>美國</option>
<option>英國</option>
<option>加拿大</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
同意條款和條件
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">提交表單</button>
</form>

這個表單包含了文本輸入、密碼輸入、下拉選單和复選框 - 所有這些都被Bootstrap驗證支持。

工具提示

想要為你的驗證消息添加一些額外的花絮嗎？試試工具提示！以下是如何操作的：

<form class="needs-validation" novalidate>
<div class="form-group">
<label for="username">用戶名</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-tooltip">
請選擇一個獨特的用戶名。
</div>
</div>
<button class="btn btn-primary" type="submit">提交表單</button>
</form>

我們將invalid-feedback替換為invalid-tooltip。現在，你將會在輸入下方看到一個時髦的工具提示，而不是文字！

驗證方法

以下是一個常用驗證方法的表格：

方法	描述
required	欄位不能為空
minlength	字符的最小長度
maxlength	字符的最大長度
min	數字輸入的最小值
max	數字輸入的最大值
type="email"	必須是有效的電子郵件地址
pattern	必須匹配特定模式

記住，你可以組合這些方法來創建更複雜的驗證規則！

好了，各位！我們已經涵蓋了Bootstrap驗證的基本知識，從自定風格到工具提示。記住，熟能生巧，所以不要害怕嘗試這些概念。快樂編程，願你的表單總是被驗證！

Credits: Image by storyset