checkValidity()仅返回布尔值，不触发UI反馈；需配合reportValidity()显示浏览器默认提示，或用setCustomValidity()设置/清除自定义错误，且须在input事件中显式清空。
checkValidity() 本身不触发 UI 反馈，只返回布尔值。要让它真正“起作用”，必须配合验证状态更新和用户可见提示——否则用户完全不知道校验发生了。
checkValidity() 的核心定位
它是一个“判断器”，不是“提醒器”。调用后：
- 返回 true 表示当前值通过所有约束（required、type、pattern 等）
- 返回 false 表示至少一项失败，但不会自动标红、不会弹气泡、不会聚焦元素
- 不会改变表单控件的 :invalid 伪类状态，除非之前已触发过验证（如用户提交过）
如何让 checkValidity() 带来实际反馈
需要手动补全三步链路：
- 先调 checkValidity() 获取结果，用于逻辑判断（比如禁用提交按钮）
- 再调 reportValidity() —— 这才是触发浏览器默认红框+气泡提示的正确方法（注意：别用它代替 checkValidity() 做条件分支）
- 对自定义错误，用 setCustomValidity()：传非空字符串表示失败，传空字符串 "" 才算清除；漏掉清空会导致字段永久报错
常见误用场景与修正
这些写法看似合理，实则失效：
- 在 input 事件里反复调
setCustomValidity("xxx")→ 干扰浏览器内部验证状态，后续输入无法恢复有效态 - 只写
if (!el.checkValidity()) { /* 什么也不做 */ }→ 用户无感知，等于没校验 - 给 select 加 required，但第一个 option 是
<option value="">请选择</option>→ 它被选中时 checkValidity() 仍返回 false，应加disabled hidden selected - 用 form.submit() 触发提交 → 绕过所有 HTML5 验证，checkValidity() 结果无效；必须用
<button type="submit"></button>或回车
一个可用的实时校验片段
适用于边输边验的输入框：
JS 部分：
email.addEventListener('input', () => {const valid = email.checkValidity();
if (!valid) {
email.setCustomValidity('请输入有效的邮箱地址');
} else {
email.setCustomValidity(''); // 关键：必须显式清空
}
});
