HTML5引入了表單相關(guān)的一些新機(jī)制：它為<input>元素和約束驗證增加了一些新的語義類型，使得客戶端檢查表單內(nèi)容變得容易?；旧?#xff0c;通過設(shè)置一些新的屬性，常用的約束條件可以無需 JavaScript 代碼而檢測到；對于更復(fù)雜的約束條件的校驗可以嘗試使用約束驗證 API。

固有和基本約束?

<input>元素

type 屬性中的固有約束有?

Input 類型??	?約束描述?? ?
<input type="URL">	值必須為 URL 現(xiàn)行標(biāo)準(zhǔn)定義的絕對 URL 地址
<input type="email">	該值必須是一個語法上有效的電子郵件地址

大多數(shù) input 類型沒有內(nèi)在的約束，因為有些類型被禁止在約束驗證中使用，或者有一個凈化算法將不正確的值轉(zhuǎn)化為正確的默認(rèn)值。

驗證相關(guān)的屬性

除了上面描述的?type?屬性外，以下屬性用于描述基本約束。

屬性	支持該特性的 Input 類型	約束描述
pattern	text、search、url、tel、email、password	輸入的值必須符合模式。
min	range、number、date、month、week、datetime-local、time	輸入的值必須大于等于該屬性值。
max	range、number、date、month、week、datetime-local、time	輸入的值必須小于等于該屬性值。
required	text、search、url、tel、email、password、date、datetime-local、month、week、time、number、checkbox、radio、file；也在 <select> 和 <textarea> 元素上可用	如果指定了這個屬性，則必須輸入一個值。
step	date、month、week、datetime-local、time、range、number	如果 step 沒有設(shè)置為字面量?any，則輸入值必須為?min?+ step 值的整數(shù)倍。
minlength	text、search、url、tel、email、password；也在 <textarea> 元素上可用	如果輸入值非空，則其字符數(shù)（碼點(diǎn)）不得少于該屬性的值。對于 <textarea>，所有換行符都被規(guī)范化為一個字符（相對于 CRLF 對）
maxlength	text、search、url、tel、email、password；也在 <textarea> 元素上可用	字符數(shù)（碼點(diǎn)）不得超過該屬性的值。

過程

約束驗證是通過約束驗證 API 在單個表單元素上或在表單層面上，通過 <form> 元素本身完成。約束驗證是通過以下方式完成的：

通過調(diào)用表單相關(guān)的 DOM 接口（HTMLInputElement、HTMLSelectElement、HTMLButtonElement 、HTMLOutputElement 或 HTMLTextAreaElement）的 checkValidity() 或 reportValidity() 方法，只對這個元素進(jìn)行約束評估，允許腳本獲得這些信息。checkValidity() 方法返回一個布爾值，表示該元素的值是否通過其約束（這通常是由用戶代理在確定哪個 CSS 偽類，:valid 或 :invalid 適用時完成的）。相反，reportValidity() 方法會向用戶報告任何約束失敗的情況。
通過調(diào)用 HTMLFormElement 接口上的 checkValidity() 或 reportValidity() 方法。
通過提交表單本身。
調(diào)用 checkValidity() 也被稱為約束的靜態(tài)驗證，調(diào)用 reportValidity() 也被稱為約束的交互認(rèn)證。

• 如果 <form> 元素上設(shè)置了 novalidate 屬性，則不發(fā)生約束驗證交互。
• 在 HTMLFormElement 接口上調(diào)用 submit() 方法并不觸發(fā)約束條件驗證。換句話說，即使表單數(shù)據(jù)不滿足約束條件，該方法也會將其發(fā)送到服務(wù)器。在提交按鈕上調(diào)用 click() 方法來代替。

約束驗證的可視化樣式

除了設(shè)置約束條件外，web 開發(fā)者還想控制向用戶顯示什么信息以及它們的樣式。

控制元素的外觀

元素的外觀可以通過 CSS 偽類進(jìn)行控制。

:required、:optional CSS 偽類
:required 和 :optional 偽類允許開發(fā)者編寫選擇器，以匹配有 required 屬性或沒有該屬性的表單元素。

:placeholder-shown CSS 偽類
參見 :placeholder-shown。

:valid、:invalid CSS 偽類
:valid 和 :invalid 偽類用于表示 <input> 元素，根據(jù)輸入的類型設(shè)置，這些元素的內(nèi)容分別可以驗證和無法驗證。這些類允許用戶對有效或無效的表單元素進(jìn)行樣式設(shè)計，以使其更容易識別格式正確或不正確的元素。

控制約束驗證的文字

以下一些方法可以控制違反約束條件的文本：

以下元素上的 setCustomValidity(message) 方法：

<fieldset>。備注：大多數(shù)瀏覽器中，在 fieldset 元素上設(shè)定自定義驗證信息不會阻止表單提交。
<input>
<output>
<select>
提交按鈕（使用類型為 submit 的 <button> 元素，或類型為 submit 的 input 元素創(chuàng)建。其他類型的按鈕不參與約束驗證。
<textarea>
ValidityState 接口描述了由上述元素類型的 validity 屬性返回的對象。它表示一個輸入值可能無效的各種方式。它們共同解釋了為什么一個元素的值是無效的，則不能被驗證。