HTML如何實現交互式表單驗證方法

這篇文章將為大家詳細講解有關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如何實現交互式表單驗證方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。