HTML互動式表單驗證-html教學-PHP中文網

HTML互動式表單驗證

巴扎黑

發布： 2017-03-19 17:31:01

原創

1138 人瀏覽過

　　在 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>

登入後複製