協助使用者在表單中輸入正確的資料

瀏覽器內建驗證功能，可檢查使用者輸入的資料格式是否正確。 只要使用正確的元素和屬性，即可啟用這些功能。除此之外，您還可以使用 CSS 和 JavaScript 強化表單驗證。

為什麼要驗證表單？

在先前的單元中，您已瞭解如何協助使用者避免在表單中重複重新輸入資訊。如何協助使用者輸入有效的資料？

如果不知道哪些欄位是必要欄位，或不知道這些欄位的限制，填寫表單會很麻煩。例如，您輸入使用者名稱並提交表單，只須知道使用者名稱至少需有 8 個字元。

定義驗證規則並傳達相關資訊，協助使用者達到這項目標。

協助使用者不小心漏填必填欄位

您可以針對在表單中輸入的資料，使用 HTML 指定正確的格式和限制。 您也需要指定哪些是必填欄位。

嘗試提交這份表單，但不要輸入任何資料。 您是否看到 <input> 隨附的錯誤訊息，指出此為必填欄位？

這是 required 屬性所致。

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

您已經知道可以使用更多類型，例如 type="email"。讓我們來看看必要的電子郵件地址 <input>。

嘗試提交這份表單，但不要輸入任何資料。 先前的示範版有任何差異嗎？ 請在電子郵件欄位中填入您的姓名，然後嘗試提交答案。 您會看見其他錯誤訊息。怎麼會這樣？ 您收到不同的訊息，因為您輸入的值不是有效的電子郵件地址。

required 屬性會告訴瀏覽器這個欄位是必填欄位。瀏覽器也會測試輸入的資料是否與 type 的格式相符。範例顯示的電子郵件欄位只有在不留空的情況下才有效，且輸入的資料是有效的電子郵件地址。

協助使用者輸入正確的格式

您已瞭解如何要求填寫欄位。您要如何指示瀏覽器，使用者必須在表單欄位輸入至少八個字元？

立即試用看看。 變更之後，如果輸入的字元少於 8 個字元，就無法提交這份表單。

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

通知驗證規則

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

確保所有使用者都瞭解您的驗證規則。 為此，請將表單控制項連結至說明規則的元素。方法是將 aria-describedby 屬性新增至具有表單 id 的元素。

模式屬性

有時候，您可能會想定義更進階的驗證規則。同樣地，您可以使用 HTML 屬性。稱為 pattern，您可以定義「規則運算式」做為值。

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

這裡只能使用小寫英文字母；使用者必須至少輸入 2 個字元，而不能超過二十個字元。

您會如何將 pattern 變更為允許大寫字母？馬上試試！

新增樣式

現在您已經學會如何在 HTML 中新增驗證。 如果可以根據驗證狀態設定表單控制項樣式，該有多好？ CSS 也能做到。

如何為必填表單欄位設定樣式

使用者與表單互動前，請先顯示必填欄位。

您可以使用 :required CSS 虛擬類別設定 required 欄位的樣式。

input:required {
  border: 2px solid;
}

樣式無效的表單控制項

您記得使用者輸入的資料無效時，會發生什麼情況嗎？ 表單控制項中附加的錯誤訊息就會出現。在這種情況下，如果會調整元素的外觀，那不是很棒嗎？

您可以使用 :invalid 虛擬類別，將樣式新增至無效的表單控制項。此外，您也可以使用 :valid 虛擬類別設定有效的表單元素樣式。

您可以根據驗證結果調整樣式。您可在 CSS 相關模組中，進一步瞭解樣式表單。

使用 JavaScript 進行驗證

如要進一步強化表單驗證，您可以使用 JavaScript Constraint Validation API。

提供有意義的錯誤訊息

在此之前，每個瀏覽器中顯示的錯誤訊息不盡相同。如何向所有人顯示相同的訊息？

為此，請使用 Constraint Validation API 的 setCustomValidity() 方法。接下來是運作方式範例

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

查詢您要設定自訂錯誤訊息的元素。監聽已定義元素的 invalid 事件。您使用 setCustomValidity() 設定訊息。本例會在輸入內容無效時顯示 Please enter your name. 訊息。

在不同瀏覽器中開啟示範模式，應該會在所有位置看到相同訊息。現在，請嘗試移除 JavaScript，然後再試一次。系統會再次顯示預設錯誤訊息。

Constraint Validation API 還有更多用途。我們將在後續單元中詳細說明如何搭配 JavaScript 進行驗證。

如何即時驗證 您可以透過監聽表單控制項的 onblur 事件，在 JavaScript 中加入即時驗證，並在使用者離開表單欄位時立即驗證輸入內容。

按一下示範中的表單欄位，輸入「web」，然後按一下頁面上的其他位置。表單欄位下方顯示 minlength 的原生錯誤訊息。

請參閱下方的單元，進一步瞭解如何使用 JavaScript 即時驗證。

隨堂測驗

測驗您對於驗證表單的相關知識

資源

• 提交表單後停用付款按鈕
• 新增 CSS 讓表單更臻完善