HTML 互動式表單驗證

　　在 HTML 中建立表單總是有點複雜。你首先得將 HTML 標記編寫正確，然後需要確保每一個表單項在提交之前都有一個可用的值，最後還需要在有問題時用提醒來告知使用者。

　　還好 HTML5 引入了一些新的特性，讓這件事情變得輕鬆了許多。特別是對錶單控制元件進行了擴充套件來支援約束，從而無需使用 JavaScript， 就可以讓瀏覽器在客戶端對錶單內容進行驗證。

　　WebKit 已經進行了部分支援。在表單控制元件上使用屬性來描述約束，然後使用 JavaScript 中的 checkValidity() API 來查詢一個表單控制元件和整個表單輸入的有效性，這已經成為可能。使用 ValidityState API 來了解違反了哪個約束，也是可以實現的。

　　不過, WebKit 以前並不支援 HTML 的互動式表單驗證, 而這個會發生在表單提交時 (除非在 <form> 元素上設定了 novalidate 屬性) 或者是使用 reportValidity() API 的時候。此外，我們很高興地宣佈， Webkit 現在已經對此進行了支援，並且在 Safari 技術預覽版 19 也啟用了這項功能。有了互動式表單驗證， WebKit 現在將會對錶單中所有的表單控制元件進行有效性檢測。如果有哪怕一個表單控制元件違反了約束，WebKit 就會將輸入焦點放到第一個上面，介面頁面滾動顯示出這個控制元件，然後在其旁邊顯示一個氣泡訊息來對問題進行解釋。

　驗證的約束

　　輸入型別

　　有一些輸入型別本身就擁有一些內在的約束。將 type 設定為 “email”, “number” 或者 “URL” 的話，就會自動檢查輸入的值是否是有效的電子郵件地址、數字或者 URL, 例如:

<input type="email">

　　驗證屬性

　　下面的屬性可以被用來在表單控制元件中描述約束:

• required: 告訴使用者必須輸入一個值。

• pattern=“[a-z]”: 告訴使用者必須輸入一個可以匹配給定 JavaScript 正規表示式的值。

• minlength=x: 告訴使用者必須輸入一個至少有 x 個字元的值。

• maxlength=y: 告訴使用者必須輸入一個至多有 x 個字元的值。

• min=x: 告訴使用者必須輸入一個大於或者等於 x 的值。。

• max=y: 告訴使用者必須輸入一個小於或者等於 y 的值。

• step=x: 告訴使用者必須輸入一個在 min 的基礎上加上 x 的倍數的值。

　約束驗證

　　約束驗證可以用以下集中方式觸發：

• 可以在一個表單元素或者特定的表單控制元件上呼叫 checkValidity() 。這個方法會在有約束被違反的時候返回 false。同時它也會在違反約束的元素上觸發一個叫做“invalid”的事件。可以使用通過表單控制元件上的“validity”屬性所暴露的 ValidityState 物件來檢查違反了哪個約束。

• 可以在一個表單約束或者特定的表單控制元件上呼叫 reportValidity()。這樣做會觸發針對約束的互動式驗證。此外 checkValidity(), reportValidity() 也會將輸入焦點放到第一個被檢查出違背了約束的元素上，並且在其旁邊顯示一個氣泡訊息來對問題進行描述。

• 互動式表單驗證也會在提交表單的時候發生，除非在<form>元素上設定了“novalidate”屬性。

　自定義約束

　　使用 JavaScript 來做驗證然後利用 setCustomValidity() API 的話，可以實現更加複雜的驗證約束或者向校驗出違反約束的輸入項提供更加有用的錯誤訊息。

　　JavaScript 可以通過在一個表單控制元件上偵聽給定的事件來觸發(例如： onchange, oninput, …) 。然後被執行的 JavaScript 程式碼可以對錶單控制元件的資料進行驗證，然後使用 setCustomValidity() 來對控制元件的錯誤訊息進行更新：

<label for="feeling">Feeling:</label>
<input id="feeling" type="text" oninput="validateFeeling(this)">
<script>
 function validateFeeling(input) {
   if (input.value == "good" || input.value == "fine" || input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" is not a feeling');
   } else {
     // The data is valid, reset the error message.
     input.setCustomValidity('');
   }
 }
</script>

　驗證訊息氣泡提示

　　在進行互動式表單驗證的時候, 一個針對問題進行說明的氣泡提示會顯示在第一個擁有被驗證違反約束的資料的表單控制元件旁邊, 像這樣:

　　針對特定的約束預設設定了一些本地化的驗證訊息。如果你希望對驗證訊息進行自定義, 可以考慮使用 setCustomValidity() API。注意，WebKit 對於 JavaScript 的國際化 API 也是支援的，這個能夠幫助我們對自定義的驗證訊息進行本地化。

　總結

　　HTML 互動式表單驗證現在已經在 Webkit 中得到了支援，並且在 Safari 技術預覽版 19 中也是啟用了的。請嘗試一下我們的線上演示來體驗這項功能。也歡迎您報告BUG。

　　原文地址：https://webkit.org/blog/7099/html-interactive-form-validation/