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

瀏覽器內建驗證功能，可檢查使用者輸入的資料格式是否正確。 只要使用正確的元素和屬性，即可啟用這些功能。 除此之外，您也可以使用 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 個字元？

立即試用。 變更完成後，如果輸入的文字少於 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 個半形字元，最多 22 個半形字元。

如何將 pattern 變更為允許使用大寫字母？ 立即試用。

新增樣式

現在您已經學會如何在 HTML 中新增驗證功能。 如果還能根據驗證狀態調整表單控制項的樣式，那該有多好？ 這能運用 CSS 達成。

如何設定必要表單欄位的樣式

向使用者顯示表單互動前，請務必提供必填欄位。

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

input:required {
  border: 2px solid;
}

樣式無效表單控制項

你還記得，如果使用者輸入的資料無效，會發生什麼事嗎？ 系統隨即顯示在表單控制項中附加的錯誤訊息。 在這種情況下，調整元素的外觀是不是好事？

您可以使用 :invalid 虛擬類別 即可在無效表單控制項中加入樣式。 此外，您也可以使用 :valid 虛擬類別來設定有效表單元素的樣式。

還有其他方式可根據驗證調整樣式。 在有關 CSS 單元中，您將進一步瞭解表單樣式。

使用 JavaScript 進行驗證

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

提供有意義的錯誤訊息

之前提過，各種錯誤訊息不盡相同。 如何向所有人顯示相同的訊息？

方法是使用 setCustomValidity()敬上 Constraint Validation API 的方法。 接下來是運作方式範例

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，讓表單品質更臻完善