如何用 checkValidity 触发 HTML5 表单的原生校验提示

checkValidity()仅返回布尔值，不触发红框和气泡提示；reportValidity()才真正触发UI反馈，但需控件有校验属性、未禁用、已挂载且表单未设novalidate。调用 checkValidity() 本身不会显示错误提示这是最常被误解的一点：checkValidity() 只返回布尔值（true 或 false），它**不触发浏览器的原生红框+气泡提示**。哪怕表单控件已失效，调用后页面看起来毫无反应。真正触发视觉反馈的是 reportValidity() —— 它内部会先调用 checkValidity()，再主动唤起 UI 提示（包括滚动到首个无效字段、高亮、显示 tooltip）。? 正确做法：用 reportValidity() 触发提示? 错误做法：只写 input.checkValidity() 就以为能弹出提示?? 注意：reportValidity() 是 HTMLInputElement 和 HTMLFormElement 都支持的方法，但行为略有不同：对 <form> 调用会检查所有子控件并报告第一个失败项；对单个 <input> 调用只检查它自己reportValidity() 在哪些场景下不生效即使调用了 reportValidity()，也可能静默失败，常见原因：控件没有设置任何校验属性（如 required、type="email"、pattern、min 等）→ 浏览器认为“无需校验”，直接返回 true控件被设为 disabled → reportValidity() 忽略 disabled 元素（即使它有 required）控件在 DOM 中但未被 append 到 document（比如刚 new Input() 但没挂载）→ 方法存在但无效果某些旧版 Safari（≤15.4）对 reportValidity() 在自定义元素中支持不完整验证是否生效最简单的方式：手动清空一个 required 输入框，再调用 reportValidity()，看是否有红边和 tooltip 弹出。立即学习“前端免费学习笔记（深入）”； Mokker AI AI产品图添加背景