HTML互動式表單驗證

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

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

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

　　不過, WebKit 以前不支援 HTML 的互動式表單驗證, 而這個會發生在表單提交時 (除非在

元素上設定了 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() 也會將輸入焦點放到第一個被檢查出違反了約束的元素上，並且在其旁邊顯示一個氣泡訊息來對問題進行描述。

• 
  

• # 互動式表單驗證也會在提交表單的時候發生，除非在

  元素上設定了「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(&#39;"&#39; + input.value + &#39;" is not a feeling&#39;);
   } else {
     // The data is valid, reset the error message.
     input.setCustomValidity(&#39;&#39;);
   }
 }
</script>

　驗證訊息氣泡提示

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

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

　總結

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

以上是HTML互動式表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！