当前位置：首页 > news >正文

HTML 约束验证

news 文章来源：https://blog.csdn.net/liuxiaoqi_123/article/details/143280587 2025/1/18 14:01:37

HTML5引入了表单相关的一些新机制：它为<input>元素和约束验证增加了一些新的语义类型，使得客户端检查表单内容变得容易。基本上，通过设置一些新的属性，常用的约束条件可以无需 JavaScript 代码而检测到；对于更复杂的约束条件的校验可以尝试使用约束验证 API。

固有和基本约束

<input>元素

type 属性中的固有约束有

Input 类型	约束描述
<input type="URL">	值必须为 URL 现行标准定义的绝对 URL 地址
<input type="email">	该值必须是一个语法上有效的电子邮件地址

大多数 input 类型没有内在的约束，因为有些类型被禁止在约束验证中使用，或者有一个净化算法将不正确的值转化为正确的默认值。

验证相关的属性

除了上面描述的 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 没有设置为字面量 `any`，则输入值必须为 min + step 值的整数倍。
minlength	text、search、url、tel、email、password；也在 <textarea> 元素上可用	如果输入值非空，则其字符数（码点）不得少于该属性的值。对于 <textarea>，所有换行符都被规范化为一个字符（相对于 CRLF 对）
maxlength	text、search、url、tel、email、password；也在 <textarea> 元素上可用	字符数（码点）不得超过该属性的值。

过程

约束验证是通过约束验证 API 在单个表单元素上或在表单层面上，通过 <form> 元素本身完成。约束验证是通过以下方式完成的：

通过调用表单相关的 DOM 接口（HTMLInputElement、HTMLSelectElement、HTMLButtonElement 、HTMLOutputElement 或 HTMLTextAreaElement）的 checkValidity() 或 reportValidity() 方法，只对这个元素进行约束评估，允许脚本获得这些信息。checkValidity() 方法返回一个布尔值，表示该元素的值是否通过其约束（这通常是由用户代理在确定哪个 CSS 伪类，:valid 或 :invalid 适用时完成的）。相反，reportValidity() 方法会向用户报告任何约束失败的情况。
通过调用 HTMLFormElement 接口上的 checkValidity() 或 reportValidity() 方法。
通过提交表单本身。
调用 checkValidity() 也被称为约束的静态验证，调用 reportValidity() 也被称为约束的交互认证。

如果 <form> 元素上设置了 novalidate 属性，则不发生约束验证交互。
在 HTMLFormElement 接口上调用 submit() 方法并不触发约束条件验证。换句话说，即使表单数据不满足约束条件，该方法也会将其发送到服务器。在提交按钮上调用 click() 方法来代替。

约束验证的可视化样式

除了设置约束条件外，web 开发者还想控制向用户显示什么信息以及它们的样式。

控制元素的外观

元素的外观可以通过 CSS 伪类进行控制。

:required、:optional CSS 伪类
:required 和 :optional 伪类允许开发者编写选择器，以匹配有 required 属性或没有该属性的表单元素。

:placeholder-shown CSS 伪类
参见 :placeholder-shown。

:valid、:invalid CSS 伪类
:valid 和 :invalid 伪类用于表示 <input> 元素，根据输入的类型设置，这些元素的内容分别可以验证和无法验证。这些类允许用户对有效或无效的表单元素进行样式设计，以使其更容易识别格式正确或不正确的元素。

控制约束验证的文字

以下一些方法可以控制违反约束条件的文本：

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

<fieldset>。备注：大多数浏览器中，在 fieldset 元素上设定自定义验证信息不会阻止表单提交。
<input>
<output>
<select>
提交按钮（使用类型为 submit 的 <button> 元素，或类型为 submit 的 input 元素创建。其他类型的按钮不参与约束验证。
<textarea>
ValidityState 接口描述了由上述元素类型的 validity 属性返回的对象。它表示一个输入值可能无效的各种方式。它们共同解释了为什么一个元素的值是无效的，则不能被验证。