四川建设网有限责任公司官网湘潭seo公司
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 属性返回的对象。它表示一个输入值可能无效的各种方式。它们共同解释了为什么一个元素的值是无效的，则不能被验证。