：输入（表单输入）元素

警告： 客户端验证是有用的，但它并不能保证服务器会收到有效的数据。如果数据必须是特定的格式，总是应该在服务器端进行验证，如果格式无效，则返回一个 400 HTTP 响应。

除了如上文 UI 伪类部分所述，使用 CSS 根据 :valid 或 :invalid 每个输入的当前状态来设计输入的样式之外，浏览器还在（试图）提交表单时提供了客户端验证。在表单提交时，如果有一个表单控件没有通过约束验证，支持的浏览器将在第一个无效的表单控件上显示一个错误信息；根据错误类型显示一个默认信息，或者由你设置的信息。

某些输入类型和其他属性对特定输入的有效值进行了限制。例如， 意味着只有数字 2、4、6、8 或 10 有效。某些错误可能发生，当值小于 2 时会发生 rangeUnderflow 错误，值大于 10 时会发生 rangeOverflow 错误，当值在 2 至 10 之间，但不是偶数（不满足 step 属性的需求）时会发生 stepMismatch 错误，如果值不是一个数字时会发生 typeMismatch 错误。

对于可能的值域是周期性的输入类型（也就是说，在可能的最高值时，值会绕回开始而不是结束），max 和 min 属性的值有可能是相反的，这表明允许的值范围从 min 开始，绕到可能的最低值，然后继续下去直到达到 max。这对日期和时间特别有用，比如你想让范围从晚上 8 点到早上 8 点：

html

特定的属性和它们的值会导致一个特定的错误 ValidityState：

如果一个表单控件没有 required 属性，没有值，或者是一个空字符串，都不是无效的。即使上述属性存在，除了 required 之外，和空字符串也不会导致错误。

我们可以对接受的值进行限制，支持的浏览器会对这些表单的数值进行原生验证，并在表单提交时提醒用户是否有错误。

除了上表中描述的错误外，validityState 接口还包含 badInput、valid 和 customError 布尔值只读属性。有效性对象包括：

对于这些布尔属性中的每一个，值为 true 表示指定的验证可能失败的原因是真实的，但 valid 属性除外，如果元素的值服从所有的约束，则为 true。

如果有错误，支持的浏览器会提醒用户，并阻止表单的提交。需要注意的是：如果自定义错误被设置为一个真值（除了空字符串或 null 以外的任何值），表单将被阻止提交。如果没有自定义错误信息，并且其他属性都没有返回真值，那么 valid 将为真，表单可以被提交。

js

最后一行，将自定义的有效性信息设置为空字符串是至关重要的。如果用户出错，而有效性被设置，即使所有的值都是有效的，也会提交失败，直到消息为 null。

如果你想在一个字段验证失败时显示一个自定义的错误信息，你需要使用约束验证 API，在 （及相关）元素上可用。以下面的表格为例：

html

如果你试图提交的表单没有填写有效的内容，或者是一个不符合 pattern 的值，基本的 HTML 表单验证功能将使其产生一个默认的错误信息。

如果你想转而显示自定义的错误信息，你可以使用下面这样的 JavaScript 代码：

js

此示例会像这样渲染：

简单来说：

备注： 始终在客户端和服务器端验证输入约束。约束验证并不能消除在服务器端进行验证的必要性。无效的值仍然可以由旧的浏览器或坏的行为者发送。 备注： Firefox 在许多版本中支持一个专有的错误属性——x-moz-errormessage，它允许你以类似的方式设置自定义错误信息。从第 66 版开始，这个属性已被移除（见Firefox bug 1513890）。