表单验证演练场 - HTML5 Constraint API 演示

HTML5 Constraint Validation API 是浏览器原生提供的表单验证机制，属于 HTML5 标准规范的一部分。它允许开发者通过 HTML 属性（如 required、pattern、min、maxlength 等）在标记层面定义验证规则，并使用 JavaScript 的 checkValidity()、reportValidity() 以及 validity 属性对象来检查和获取验证状态。这套 API 的核心优势在于无需引入第三方验证库，即可在浏览器端实现标准化的表单校验体验，同时保持良好的可访问性和一致性。在 表单验证演练场 中，你可以通过实际操作完整体验这套 API 的所有功能。

validity 对象包含以下布尔属性：valid 表示所有验证均通过；valueMissing 表示必填字段为空；typeMismatch 表示输入值不符合 type 指定的格式（如 email、url）；patternMismatch 表示输入值不匹配 pattern 正则表达式；tooShort 表示输入长度小于 minlength；tooLong 表示输入长度大于 maxlength；rangeUnderflow 表示数值小于 min；rangeOverflow 表示数值大于 max；stepMismatch 表示数值不符合 step 步长；badInput 表示浏览器无法解析输入（如 number 字段输入了非数字）；customError 表示通过 setCustomValidity() 设置了自定义错误。在 演练场 的 Validity 检查器中，你可以实时查看每个字段的这些属性状态。

setCustomValidity(message) 用于设置自定义验证错误消息。传入非空字符串会使字段验证失败，validity.customError 变为 true，validity.valid 变为 false。传入空字符串则清除自定义错误，恢复浏览器默认验证行为。常见应用场景包括：密码确认匹配检查、两个日期范围的比较、条件必填字段等。在 表单验证演练场 中，确认密码字段就使用了 setCustomValidity 来实现两次密码输入的一致性校验。需要注意的是，一旦设置了自定义错误，即使其他验证属性全部通过，validity.valid 仍然会是 false，直到自定义错误被清除。

checkValidity() 会静默检查表单或字段是否有效，返回布尔值，但不会显示浏览器的任何错误提示气泡或 UI 反馈。它适合在需要自定义验证展示的场景中使用，例如开发者希望用自己的样式展示错误信息而不是依赖浏览器原生的提示样式。reportValidity() 除了执行验证检查和返回布尔值外，还会在验证失败时触发浏览器显示原生的验证错误提示，通常会在第一个无效字段上弹出一个气泡提示框，显示该字段的 validationMessage 内容。它适合在用户点击提交时调用，为用户提供即时的浏览器原生错误反馈。在 演练场 中，你可以分别点击这两个按钮来对比它们的不同表现。

novalidate 属性可以添加在 form 元素上，用于禁用浏览器的默认表单验证行为。默认情况下，当用户点击提交按钮时，浏览器会自动执行验证并在第一个无效字段上弹出错误提示。添加 novalidate 后，浏览器会跳过这个自动验证流程，让开发者完全通过 JavaScript 手动控制验证逻辑和 UI 展示。这种做法在以下场景中比较常见：需要自定义验证提示的样式和位置、需要在验证前执行异步操作（如服务器端查重）、需要实现分步表单的验证逻辑等。在 表单验证演练场 中，你可以在代码层面移除 novalidate 属性来观察浏览器默认验证行为的差异。

使用 pattern 属性时有几个重要的注意事项。首先，浏览器会自动在正则表达式两端添加 ^(?: 和 )$ 包裹，这意味着默认要求完全匹配整个输入值，开发者不需要也不应该手动在正则中添加 ^ 和 $。其次，HTML 属性中无法设置正则表达式标志（如 /g、/i、/m），如果需要使用这些标志，应该通过 JavaScript 的 RegExp 对象进行验证。第三，pattern 验证只在字段有值时才会触发，如果字段为空且没有设置 required 属性，则 pattern 验证会被跳过。最后，也是最重要的一点：客户端验证仅用于提升用户体验，永远不应该替代服务端验证。在 演练场 中，用户名和密码字段都使用了 pattern 属性，你可以尝试不同的输入来观察正则匹配的效果。

HTML5 规范为不同的 input type 定义了不同的默认验证行为。例如，type=email 会自动验证输入值是否符合电子邮件格式，type=url 会自动验证 URL 格式，type=number 会验证输入是否为有效数字。这些基于 type 的验证是浏览器内置的，不需要额外添加 pattern 属性。min 和 max 属性主要用于 type=number 和 type=date 的字段，对 type=text 等文本类型字段不起作用。minlength 和 maxlength 则主要用于文本类型的字段。在 表单验证演练场 中，你可以看到不同字段根据其 type 属性自动应用了相应的验证规则，这也是为什么理解每个 type 的默认验证行为对于正确设计表单至关重要。

validationMessage 是浏览器根据当前的验证状态自动生成的本地化错误消息文本。当字段验证失败时，浏览器会根据失败的具体原因（如 valueMissing、typeMismatch、patternMismatch 等）选择对应的错误消息模板，并根据用户的浏览器语言设置进行本地化翻译。validationMessage 是只读属性，开发者无法直接修改它的值。如果需要自定义错误消息，只能通过 setCustomValidity() 方法来设置，但这会使得 validity.customError 变为 true。在 演练场 中，Validity 检查器面板会实时显示当前字段的 validationMessage 内容，你可以通过切换浏览器语言来观察消息的本地化变化。

要清除通过 setCustomValidity() 设置的自定义错误，只需再次调用该方法并传入空字符串即可，例如 element.setCustomValidity('')。清除后，validity.customError 会恢复为 false，validity.valid 的值将取决于其他验证属性的状态。在实际开发中，通常会在 input 事件监听器中进行判断：如果验证通过就传入空字符串清除错误，如果验证失败就传入错误消息字符串设置自定义错误。在 演练场 中，确认密码字段就采用了这种模式来实时检查两次密码是否一致，并在不一致时通过 setCustomValidity 显示自定义错误消息。