输入验证

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>

表单包含发布草稿所需的字段，但不是保存草稿所必需的字段。