HTML5 Constraint Validation API 是浏览器原生提供的表单验证机制。它允许开发者通过HTML属性（如 required、pattern、min、maxlength 等）定义验证规则，并使用 JavaScript 的 checkValidity()、reportValidity() 以及 validity 属性对象来检查和获取验证状态，无需引入第三方验证库。

validity 对象包含以下布尔属性：
• valid — 所有验证均通过
• valueMissing — 必填字段为空
• typeMismatch — 输入值不符合 type 指定的格式（如 email、url）
• patternMismatch — 输入值不匹配 pattern 正则表达式
• tooShort — 输入长度小于 minlength
• tooLong — 输入长度大于 maxlength
• rangeUnderflow — 数值小于 min
• rangeOverflow — 数值大于 max
• stepMismatch — 数值不符合 step 步长
• badInput — 浏览器无法解析输入（如 number 字段输入了非数字）
• customError — 通过 setCustomValidity() 设置了自定义错误

setCustomValidity(message) 用于设置自定义验证错误消息。传入非空字符串会使字段验证失败，validity.customError 变为 true。传入空字符串则清除自定义错误。常见场景包括：密码确认匹配、两个日期范围的比较、条件必填等。示例：
input.setCustomValidity('两次密码不一致');

• checkValidity() — 静默检查表单/字段是否有效，返回布尔值，不会显示浏览器的错误提示气泡。适合在提交前做静默判断。
• reportValidity() — 检查有效性并触发浏览器显示验证错误提示（通常在第一个无效字段上显示气泡提示），也返回布尔值。适合在用户点击提交时调用。

novalidate 属性禁用浏览器的默认表单验证行为（提交时自动弹出验证提示），让开发者完全通过 JavaScript 控制验证流程和UI展示。当你需要自定义验证提示样式、异步验证、或分步表单时，通常会添加此属性，然后手动调用 checkValidity() 或 reportValidity()。

• pattern 的正则表达式会自动添加 ^(?: 和 )$ 包裹，即默认要求完全匹配整个输入值
• 不需要手动添加 ^ 和 $
• 正则标志（如 /g、/i）不能通过HTML属性设置，需要时使用 JavaScript 验证
• 始终在服务端再次验证，客户端验证仅用于提升用户体验