checkValidity方法仅适用于原生表单元素（input、select、textarea）和form元素，需实现HTMLFormElement或HTMLInputElement接口；调用后仅返回布尔值，不触发UI反馈或invalid事件，需reportValidity()显示气泡。
checkValidity 方法在哪些元素上能用
checkValidity 是原生表单控件（<input>、<select>、<textarea>）和 <form> 元素都支持的方法，但不是所有元素都有实际效果。比如 <div> 或自定义组件调用会直接报 TypeError: checkValidity is not a function。
关键点：只有实现了 HTMLFormElement 或 HTMLInputElement 等表单相关接口的元素才具备该方法。一个常见误操作是给带 contenteditable 的 <div> 调用它——它不会触发任何校验逻辑，也不会抛错（取决于浏览器），只是静默返回 true。
-
<input required>、<input type="email">、<select required>等有约束属性的控件，调用后会触发内置校验 -
<form>元素调用时，会逐个检查其直属可校验子元素（不含disabled的），任一失败即返回false -
<input type="hidden">和disabled元素会被跳过，不参与校验
调用 checkValidity 后不显示错误提示怎么办
这是最常被卡住的地方：checkValidity 只做判断、不触发 UI 反馈。它返回 false 时，浏览器并不会自动显示 title 提示或红框样式——除非你手动调用了 reportValidity()。
如果你希望用户看到原生错误气泡（如 “请填写此字段”），必须显式调用 reportValidity()；而 checkValidity 更适合用于逻辑分支判断，比如提交前拦截：
立即学习“前端免费学习笔记（深入）”；
if (!form.checkValidity()) {
// 不想弹气泡，只做自定义处理
showCustomErrors(form);
return;
}
submitForm();
-
checkValidity()返回布尔值，不改变 DOM 状态，也不触发invalid事件 -
reportValidity()内部会先调用checkValidity()，再显示气泡、添加:invalid伪类、触发invalid事件 - 某些场景下（如监听
input实时校验），反复调用reportValidity()会导致气泡频繁闪现，应避免
为什么 checkValidity 在 disabled 元素上总返回 true
这是规范行为，不是 bug。disabled 元素被浏览器视为“不可交互、不参与表单提交”，因此也排除在校验流程之外。即使它有 required 属性，checkValidity() 也会忽略它并返回 true。
如果你需要校验被禁用但仍有业务意义的字段（例如后台传来的只读必填项），不能依赖原生机制：
- 移除
disabled，改用readonly+ CSS 锁定样式（readonly元素仍参与校验） - 手动检查值是否为空或格式不符，绕过
checkValidity（例如input.value.trim() === ''） - 对
disabled元素做特殊标记（如data-ignored-for-validation="false"），并在自定义校验逻辑中单独处理
与 setCustomValidity 配合时的典型陷阱
setCustomValidity() 会覆盖所有内置校验结果，且一旦设为非空字符串，checkValidity() 就永远返回 false，直到你调用 setCustomValidity('') 清空。
常见翻车现场：
- 忘记清空：提交成功后没重置，导致下次调用
checkValidity()仍返回false - 条件未覆盖全：只在错误时
setCustomValidity('xxx')，但没在正确时setCustomValidity('')，导致状态滞留 - 在
input事件里无节制设置：输入过程中频繁触发，可能让:invalid类一直挂着，影响样式
推荐写法：
input.addEventListener('input', () => {
if (input.value.length < 3) {
input.setCustomValidity('至少输入 3 个字符');
} else {
input.setCustomValidity(''); // 必须清空！
}
});
真正难的是把原生校验逻辑嵌进复杂交互里——比如动态增删字段、异步验证、多步骤表单。这时候 checkValidity 只是个起点，后续往往得自己维护校验状态、聚合错误、控制反馈时机。
