输入验证

HTML 输入验证由浏览器根据 input 元素上的特殊属性自动完成。它可以部分或完全取代 JavaScript 输入验证。用户可以通过特制的 HTTP 请求来规避这种验证,因此它不会取代服务器端输入验证。验证仅在尝试提交表单时发生,因此所有受限制的输入必须位于表单内才能进行验证(除非你使用的是 JavaScript)。请记住,禁用或只读的输入不会触发验证。

一些较新的输入类型(如 emailurlteldate 等等)会自动验证,不需要你自己的验证限制。

Version >= 五

需要

使用 required 属性指示必须完成字段才能通过验证。

<input required>

最小/最大长度

使用 minlengthmaxlength 属性指示长度要求。大多数浏览器会阻止用户在框中输入超过最多字符的内容,从而防止他们在尝试提交之前使其输入无效。

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

指定范围

使用 minmax 属性来限制用户可以输入到 numberrange 类型的输入的数字范围

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 版中显示的消息:

StackOverflow 文档

并非所有浏览器都显示无效模式的消息,尽管大多数现代浏览器都提供完全支持。

检查 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>

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