態(tài)

鑰匙要點

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

基本約束驗證

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

您可以通過編寫以下標(biāo)記來驗證URL：

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

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

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

>

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

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

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

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

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

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

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

處理複雜約束

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

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

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

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

使用上述方法最好的部分是您不必?fù)?dān)心如何向用戶提供錯誤消息。您只需要使用適當(dāng)?shù)膮?shù)調(diào)用一個簡單的方法 - setCustomVality（），並且將相應(yīng)地顯示錯誤消息。

結(jié)論

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

html5約束API的經(jīng)常詢問表單驗證

的問題

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

>約束API與傳統(tǒng)的JavaScript驗證方法有何不同？

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

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

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

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

>

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

>

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

>

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

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

>

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

>

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

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

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

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

以上是使用HTML5約束API進(jìn)行表單驗證的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！