使用HTML5約束API進行表單驗證

態

鑰匙要點

• > HTML5約束API通過允許開發人員避免使用JavaScript進行基本驗證，從而簡化了形式驗證，從而使過程變得更加用戶和開發人員友好。 可以通過為輸入元素的類型屬性（例如“電子郵件”或“ url”）使用適當的值來實現
基本驗證。其他驗證屬性，例如模式，必需，最大長度，最小值和最大可用於實現基本約束。
>對於復雜的驗證邏輯，HTML5約束API可用於執行客戶端驗證和顯示錯誤消息。 API包含一個setCustomVality（）方法，該方法可用於將字段標記為有效或無效並顯示自定義錯誤消息。
• >
對於許多開發人員來說，驗證網絡表格一直是一項痛苦的任務。在用戶以及對開發人員友好的方式中執行客戶端驗證確實很難。此外，以令人愉悅的方式將驗證錯誤告知用戶是一項繁瑣的任務。 HTML5約束驗證API可幫助開發人員避免使用JavaScript進行簡單驗證。 對於復雜的驗證邏輯，可用於執行客戶端驗證並非常容易地顯示錯誤消息。在本教程中，我將為您概述HTML5約束驗證API，並討論如何在項目中使用它來創建更好的Web表單。 在進行進一步之前，請查看此兼容性圖表，以確保您的瀏覽器支持哪些功能。請注意，儘管HTML5約束驗證API提供了一種驗證表單字段的絕佳方法，但必須始終進行服務器端驗證。

基本約束驗證

可以通過為輸入元素的類型屬性選擇最合適的值來執行基本驗證。例如，您可以通過編寫以下HTML來驗證電子郵件：

您可以通過編寫以下標記來驗證URL：

<span><span><span><input</span> type<span>=”email”</span> /></span>		//The field value must be an email</span>

通過使用電子郵件或URL作為類型的值 屬性，自動添加約束，並在提交表單時自動驗證字段。如果發生任何驗證錯誤，瀏覽器還以非常用戶友好的方式顯示錯誤消息。 您還可以在表格中使用幾種基於驗證的屬性。以下是可用於實現基本約束的一些屬性：

<span><span><span><input</span> type<span>=”URL”</span> /></span>			// The field value must be a URL</span>

>

模式：模式屬性用於指定正則表達式，並且字段值必須與此模式匹配。此屬性可以與輸入類型一起使用，例如文本，密碼，電子郵件，URL，TEL和搜索。 例如，以下HTML摘要使用輸入字段的模式屬性。
1. 提交表單後，在輸入字段上執行驗證。結果，在這種情況下，像ABCD這樣的值不會通過驗證。

   <span><span><span><input</span> type<span>=”text”</span> pattern<span>=”[1-4]{5}”</span> /></span></span>

   必需：必需的屬性表明必須為輸入元素指定值。
2. 以上片段利用了所需的屬性。如果您將字段留為空並嘗試提交表格，則會發生驗證錯誤。

   <span><span><span><input</span> type<span>=”email”</span> /></span>		//The field value must be an email</span>

   > maxLength：這是一個整數值，指定特定輸入字段允許的最大字符數。
以上片段為輸入字段增加了上限。在此輸入元素中輸入的值必須小於20個字符。
3. >

   <span><span><span><input</span> type<span>=”URL”</span> /></span>			// The field value must be a URL</span>

   > min＆max：正如名稱所暗示的那樣，最小和最大屬性分別為輸入元素指定下限和上限。

處理複雜約束

可以使用HTML5約束API輕鬆處理複雜驗證邏輯。例如，您可以擁有密碼字段和確認密碼字段。您需要確保在提交時兩個字段中的值相同。如果沒有，則應向用戶顯示錯誤消息。實際上，使用HTML5約束API可以很容易地完成此操作。 首先，我們需要將Onchange偵聽器附加到密碼字段。以下片段顯示HTML形式。

<span><span><span><input</span> type<span>=”email”</span> /></span>		//The field value must be an email</span>

由於將在所有字段均得到完全驗證之前沒有提交事件，因此實際上無法知道何時提交表格。這就是為什麼我們對變更活動感興趣的原因。每當觸發更改事件時，我們都需要檢查兩個密碼是否匹配。如果是，我們在輸入元素（在這種情況下為密碼字段）上調用setCustomVality（），用一個空字符串作為參數。 這意味著密碼字段標記為有效，因此，當提交表單時，將沒有驗證錯誤。另一方面，如果我們發現密碼在更改中不匹配 事件，我們將帶有錯誤消息的setCustomVality（）稱為參數。這意味著密碼字段將被標記為無效的，並且當用戶提交表單時將顯示錯誤消息。 以下JavaScript實現了此邏輯：

<span><span><span><input</span> type<span>=”URL”</span> /></span>			// The field value must be a URL</span>

使用上述方法最好的部分是您不必擔心如何向用戶提供錯誤消息。您只需要使用適當的參數調用一個簡單的方法 - setCustomVality（），並且將相應地顯示錯誤消息。

結論

您可以使用HTML5約束驗證API實現許多簡單至高級的約束。 API提供了一套用於自定義驗證過程的工具。我們剛剛討論了API的一部分。 要了解CSS鉤等更高級的概念，有效性狀態在Mozilla查看本教程。

html5約束API的經常詢問表單驗證

的問題

> HTML5約束API是什麼，為什麼對於表單驗證很重要？ >

>約束API與傳統的JavaScript驗證方法有何不同？

>傳統的JavaScript驗證方法通常涉及為每個表單字段編寫自定義代碼。這可能很耗時且容易出錯。另一方面，約束API提供了一組標準化的方法和屬性，可用於驗證表單字段。這可以使您的代碼更加有效，更易於維護。

>我可以將約束API與所有類型的表單字段一起使用嗎？

>可以將約束API與大多數類型的表單字段一起使用，包括文本字段，複選框，無線電按鈕和選擇菜單。但是，它可能無法與使用第三方庫創建的某些類型的自定義表單字段或字段一起使用。

>如何自定義約束API顯示的錯誤消息？提供了一種setVality方法，該方法允許您設置自定義錯誤消息。您可以將此方法與驗證屬性結合使用，以顯示表單字段失敗驗證時的自定義錯誤消息。

>

>我可以使用約束API在服務器端上驗證表單嗎？約束API是客戶端技術，這意味著它在用戶的瀏覽器中運行。但是，您可以將其與服務器端驗證方法結合使用，以提供更強大的驗證解決方案。始終始終驗證用戶在服務器端上的輸入，因為惡意用戶可以繞過客戶端驗證。

>

>我如何使用約束API立即驗證多個表單字段？ 🎜>約束API提供了一種校驗值方法，可一次用來一次以形式驗證所有字段。此方法返回一個布爾值，指示表單中的所有字段是否有效。

>

>我可以將約束API與使用html5表單元素創建的表單使用？

是的，約束API是設計的使用HTML5表單元素。它提供了一組方法和屬性，可用於驗證這些元素並確保用戶輸入符合某些標準。

>

>我如何使用約束API實時驗證表單？ 🎜>約束API可以與JavaScript事件偵聽器結合使用，以實時驗證表單字段。例如，您可以使用輸入事件每次用戶鍵入其中驗證一個字段。

>

>我可以使用約束API驗證舊瀏覽器中的表單嗎？

>約束API是HTML5的功能，因此可能不支持較舊的瀏覽器。但是，您可以使用功能檢測來檢查約束API是否可用，並提供後備驗證方法。

>我如何使用約束API在移動上下文中驗證表單？

>約束API在移動設備上與在桌面瀏覽器上相同的方式工作。但是，您可能需要調整驗證規則，以說明移動設備的不同輸入方法和屏幕尺寸。

以上是使用HTML5約束API進行表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！