輸入驗證

HTML 輸入驗證由瀏覽器根據 input 元素上的特殊屬性自動完成。它可以部分或完全取代 JavaScript 輸入驗證。使用者可以通過特製的 HTTP 請求來規避這種驗證，因此它不會取代伺服器端輸入驗證。驗證僅在嘗試提交表單時發生，因此所有受限制的輸入必須位於表單內才能進行驗證（除非你使用的是 JavaScript）。請記住，禁用或只讀的輸入不會觸發驗證。

一些較新的輸入型別（如 email，url，tel，date 等等）會自動驗證，不需要你自己的驗證限制。

Version >= 五

需要

使用 required 屬性指示必須完成欄位才能通過驗證。

<input required>

最小/最大長度

使用 minlength 和 maxlength 屬性指示長度要求。大多數瀏覽器會阻止使用者在框中輸入超過最多字元的內容，從而防止他們在嘗試提交之前使其輸入無效。

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

指定範圍

使用 min 和 max 屬性來限制使用者可以輸入到 number 或 range 型別的輸入的數字範圍

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

Version >= 五

匹配模式

要獲得更多控制，請使用 pattern 屬性指定必須匹配的任何正規表示式，以便通過驗證。你還可以指定 title，如果欄位未通過，則包含在驗證訊息中。

<input pattern="\d*" title="Numbers only, please.">

當嘗試在此欄位中提交包含無效值的表單時，以下是 Google Chrome 51 版中顯示的訊息：

並非所有瀏覽器都顯示無效模式的訊息，儘管大多數現代瀏覽器都提供完全支援。

檢查 CanIUse 的最新支援並相應地實施。

Version >= 五

接受檔案型別

對於 file 型別的輸入欄位，可以僅接受某些型別的檔案，例如視訊，影象，音訊，特定副檔名或某些媒體型別 。例如：

<input type="file" accept="image/*" title="Only images are allowed">

可以使用逗號指定多個值，例如：

<input type="file" accept="image/*,.rar,application/zip">

注意： 將 form 屬性新增到 form 元素或 formnovalidate 屬性到提交按鈕，會阻止對錶單元素進行驗證。例如：

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

表單包含釋出草稿所需的欄位，但不是儲存草稿所必需的欄位。