UD5工具箱
第一步：了解页面布局
打开 表单验证演练场 页面后，你会看到两个主要区域。左侧是表单验证区，包含一个完整的注册表单，每个字段下方都标注了该字段使用的验证属性。右侧是 Validity 检查器面板，用于实时展示所选字段的验证状态详情。页面底部还有常见问题和知识点区域，提供了关于 HTML5 Constraint Validation API 的详细说明。建议先花一到两分钟浏览整个页面的布局，熟悉各功能区域的位置。
第二步：手动填写表单
点击用户名字段，尝试输入不同的内容。先输入一个空值然后点击其他字段，观察浏览器弹出的 required 验证提示。接着输入一个少于 3 个字符的值，观察 minlength 验证的效果。再尝试输入包含特殊字符的值，观察 pattern 正则匹配的验证效果。填写完用户名后，继续填写电子邮件、密码等其他字段，逐步体验每个验证属性的行为。在填写过程中，注意观察右侧 Validity 检查器中各属性的实时变化。
第三步：使用 Validity 检查器
在填写表单的过程中，点击任意一个已填写的字段，然后查看右侧的 Validity 检查器面板。面板中会列出该字段 validity 对象的所有 11 个布尔属性，每个属性后面会显示 true 或 false。例如，如果一个 required 字段为空，valueMissing 属性会显示为 true；如果一个 type=email 字段的输入值不包含 @ 符号，typeMismatch 属性会显示为 true。同时，面板底部会显示 validationMessage 的具体内容，这是浏览器为当前验证失败生成的本地化错误消息。通过这种方式，你可以精确地了解每个字段当前的验证状态和失败原因。
第四步：体验不同验证触发方式
填写一些故意违反规则的数据后，分别点击提交表单、checkValidity() 和 reportValidity() 三个按钮，观察它们的不同表现。提交表单按钮会触发浏览器的默认提交行为，如果页面设置了 novalidate 属性则会跳过自动验证。checkValidity() 按钮会执行验证并返回 true 或 false，但不会显示任何错误提示。reportValidity() 按钮则会执行验证并弹出浏览器原生的错误提示气泡。通过对比这三种方式的表现，你可以清楚地理解它们各自的用途和区别。
第五步：使用数据填充功能
点击填充有效数据按钮，工具会自动在所有字段中填入符合验证规则的示例数据。此时观察表单状态，所有字段应该都处于验证通过的状态，Validity 检查器中 valid 属性显示为 true。然后点击重置表单按钮清除所有数据，再点击填充无效数据按钮，工具会填入刻意违反规则的数据。此时你会看到各字段下方出现验证错误提示，Validity 检查器中对应的错误属性变为 true，validationMessage 也会显示相应的错误描述。这种对比体验能帮助你快速理解验证通过和验证失败时的系统行为差异。
第六步：深入测试自定义验证
确认密码字段使用了 setCustomValidity 方法来实现自定义验证逻辑。尝试在密码和确认密码字段中输入不同的值，然后观察 Validity 检查器中 customError 属性的变化。当两次密码不一致时，customError 属性会变为 true，validationMessage 会显示自定义的错误消息。修改确认密码使其与密码一致后，customError 会恢复为 false。这个例子展示了如何通过 JavaScript 的 setCustomValidity 方法扩展浏览器原生验证能力，实现更复杂的验证逻辑，如密码一致性检查、异步验证、条件验证等场景。