UD5工具箱
Constraint Validation API
Constraint Validation API 是浏览器原生提供的一套表单验证机制，属于 HTML5 标准的一部分。它允许开发者通过 HTML 属性（如 required、pattern、min、max、minlength、maxlength、type 等）在标记层面定义验证规则，同时提供 JavaScript 接口（如 checkValidity()、reportValidity()、setCustomValidity() 和 validity 对象）来程序化地控制和查询验证状态。在本工具中，表单验证演练场正是基于这套 API 构建的，用户通过操作表单可以直接体验这套机制的完整功能。
validity 对象
validity 对象是 HTML5 Constraint Validation API 中的一个只读属性，存在于每个表单控件元素上（通过 element.validity 访问）。它包含 11 个布尔类型的只读属性，用于描述当前字段的验证状态。这些属性分别是 valid、valueMissing、typeMismatch、patternMismatch、tooShort、tooLong、rangeUnderflow、rangeOverflow、stepMismatch、badInput 和 customError。其中 valid 为 true 表示所有验证均通过，其余任何一个为 true 都表示存在对应的验证问题。在本工具中，Validity 检查器面板会实时展示所选字段的 validity 对象所有属性值，帮助用户精确定位验证失败的具体原因。
checkValidity() 方法
checkValidity() 是 Constraint Validation API 提供的一个方法，可以应用于表单元素或单个表单控件。当在表单元素上调用时，它会检查表单中所有字段的验证状态；当在单个控件上调用时，只检查该控件的验证状态。该方法返回一个布尔值：true 表示所有检查通过，false 表示至少有一个字段验证失败。关键特性是 checkValidity() 是一个静默操作，它不会触发浏览器显示任何错误提示气泡或 UI 反馈。这使得它非常适合在需要自定义验证展示的场景中使用，开发者可以在调用 checkValidity() 后根据返回值自行决定如何向用户展示验证结果。在本工具中，checkValidity() 按钮的演示正是展示了这种静默验证的行为特点。
reportValidity() 方法
reportValidity() 同样是 Constraint Validation API 提供的方法，它的功能与 checkValidity() 类似，都会执行验证检查并返回布尔结果。但不同之处在于，reportValidity() 会在验证失败时触发浏览器原生的验证错误提示 UI，通常表现为在第一个无效字段上弹出一个气泡提示框，显示该字段的 validationMessage 文本。如果所有字段都验证通过，则不显示任何提示。这个方法适合在用户主动点击提交按钮时调用，因为它既能执行验证逻辑，又能通过浏览器原生 UI 给用户直观的错误反馈。在本工具中，reportValidity() 按钮清晰地演示了这种带有 UI 反馈的验证触发方式。
setCustomValidity() 方法
setCustomValidity(message) 是 Constraint Validation API 中用于设置自定义验证错误消息的方法。当传入一个非空字符串作为参数时，该字段的 validity.customError 属性会变为 true，同时 validity.valid 变为 false，表单验证整体失败。传入空字符串则会清除自定义错误，恢复到浏览器默认的验证行为。这个方法的核心用途是实现浏览器原生验证属性无法覆盖的复杂验证逻辑，例如比较两个字段的值（如密码确认匹配）、进行条件判断（如某个字段在特定条件下才必填）或执行异步验证（如检查用户名是否已被注册）。在本工具中，确认密码字段正是使用了 setCustomValidity 来实现两次密码输入的一致性检查。
pattern 属性
pattern 属性是 HTML5 表单验证中用于定义正则表达式匹配规则的属性。开发者可以在 input 元素上设置 pattern 属性，其值为一个正则表达式字符串，浏览器会自动将用户输入与该正则进行匹配。如果输入值不匹配，patternMismatch 属性会变为 true。需要注意的重要细节是，浏览器会自动在正则表达式两端添加 ^(?: 和 )$ 包裹，即默认要求完全匹配整个输入值，开发者不需要手动添加 ^ 和 $。此外，HTML 属性中无法设置正则表达式标志（如 /g、/i），如需使用这些标志应通过 JavaScript 进行验证。在本工具中，用户名和密码等字段都使用了 pattern 属性来定义输入格式要求。
min 和 max 属性
min 和 max 属性用于为数值类型或日期类型的 input 元素设置允许的最小值和最大值。对于 type=number 的字段，用户输入的数值必须在 min 和 max 定义的范围内，否则 rangeUnderflow（小于 min）或 rangeOverflow（大于 max）属性会变为 true。对于 type=date 的字段，min 和 max 定义了允许的日期范围。在本工具中，年龄字段设置了 min=1 和 max=150，出生日期字段设置了 max 为今天的日期，确保用户不能输入未来的日期。这些属性为数值和日期输入提供了简洁的范围约束能力，无需编写额外的 JavaScript 验证代码。
minlength 和 maxlength 属性
minlength 和 maxlength 属性用于限制文本输入的字符长度。minlength 定义了输入内容的最小字符数，如果输入长度小于该值，tooShort 属性会变为 true。maxlength 定义了输入内容的最大字符数，超过该值时 tooLong 属性会变为 true。这两个属性是实现输入长度验证的最简便方式，浏览器会自动阻止用户输入超过 maxlength 限制的内容（在大多数浏览器中），并在验证时检查 minlength 要求。在本工具中，用户名字段设置了 minlength=3 和 maxlength=20，密码字段设置了 minlength=8，个人简介字段设置了 maxlength=200 并配合 JavaScript 实时显示字符计数。这些属性为文本长度控制提供了原生的、无需 JavaScript 的解决方案。