checkValidity()是HTML表单元素的原生验证方法，返回布尔值表示校验结果；它不触发UI反馈，需配合reportValidity()显示默认提示，且依赖校验属性、非disabled/readonly状态及手动调用。
checkValidity() 是 HTML 表单元素（如 <input>、<textarea>、<select>）的原生方法，用于触发浏览器内置的表单验证逻辑，并返回一个布尔值表示当前字段是否通过校验。
调用 checkValidity 的基本方式
直接在表单控件 DOM 元素上调用即可：
- 对单个输入框：获取元素后调用
element.checkValidity() - 对整个表单：调用
formElement.checkValidity()，它会检查所有可验证子控件，任一失败即返回false
配合 reportValidity 显示默认错误提示
checkValidity() 本身不会弹出错误信息或高亮问题字段。如需显示浏览器默认的校验提示（比如红色边框 + tooltip），应使用 reportValidity() —— 它内部先调用 checkValidity()，再自动触发 UI 反馈。
例如：
立即学习“Java免费学习笔记（深入）”；
const input = document.querySelector('#email');
if (!input.checkValidity()) {
input.reportValidity(); // 显示原生错误气泡
}
在自定义提交逻辑中手动校验
当禁用默认提交行为（如用 event.preventDefault()）时，可主动调用 checkValidity() 控制流程：
- 校验通过才执行后续操作（如发请求）
- 校验失败可聚焦首个无效字段，提升体验
示例：
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
if (this.checkValidity()) {
// 执行 AJAX 提交等
console.log('表单有效，可以提交');
} else {
// 找到第一个无效字段并聚焦
const invalidEl = this.querySelector(':invalid');
invalidEl?.focus();
}
});
注意点和常见情况
确保校验生效需满足以下条件：
- 元素必须有
required、type="email"、pattern、min/max等校验属性 - 元素不能被设置
disabled或readonly（会被跳过校验） - 动态修改 value 后，需手动调用
checkValidity()，不会自动重校验 - 某些浏览器对
checkValidity()在隐藏元素或未渲染完成时可能返回true，建议确保元素已挂载且可见
