checkValidity()可主动触发浏览器原生表单校验并返回布尔值，配合reportValidity()显示提示气泡；setCustomValidity()支持自定义错误，需清空字符串重置；校验应为提交流程第一步，注意移动端兼容性及DOM动态更新后的状态同步。
表单提交前用 checkValidity() 主动触发校验
浏览器原生表单校验（required、type="email"、pattern 等）默认只在用户点击提交按钮或调用 submit() 时触发，但有时你需要在 JS 中提前判断状态，比如禁用按钮、显示提示或拦截异步提交。这时不能依赖 submit 事件是否被阻止，而要主动调用 checkValidity()。
它会同步执行所有约束检查，返回布尔值，并触发 invalid 事件（可用于监听单个字段失败）：
const form = document.querySelector('form');
const submitBtn = form.querySelector('button[type="submit"]');
form.addEventListener('input', () => {
// 输入过程中实时更新按钮状态
submitBtn.disabled = !form.checkValidity();
});
// 或在 fetch 前校验
async function handleSubmit(e) {
e.preventDefault();
if (!form.checkValidity()) return; // 原生校验不通过，不发请求
await fetch('/api', { method: 'POST', body: new FormData(form) });
}
注意：checkValidity() 不会自动显示浏览器默认的气泡提示（title 或红框），如需视觉反馈，得手动调用 reportValidity()。
reportValidity() 和 setCustomValidity() 配合自定义错误
当原生约束不够用（比如“两次输入密码不一致”），就得用 setCustomValidity() 标记字段无效，并配合 reportValidity() 触发统一提示。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
setCustomValidity('')表示有效（空字符串 ≠ 无提示，而是清除自定义错误） -
setCustomValidity('密码不匹配')表示无效，且该字符串会作为提示文案 -
reportValidity()会触发整个表单的校验流程，包括显示原生提示气泡
示例：
const pwd1 = document.getElementById('password');
const pwd2 = document.getElementById('confirm-password');
pwd2.addEventListener('input', () => {
if (pwd2.value !== pwd1.value) {
pwd2.setCustomValidity('两次输入的密码不一致');
} else {
pwd2.setCustomValidity(''); // 必须清空，否则后续校验永远失败
}
});
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault();
form.reportValidity(); // 确保错误提示可见
}
});
避免 submit 事件中漏掉校验逻辑
常见错误是直接在 submit 事件里写业务逻辑，却忘了先调用 checkValidity() 或没处理 preventDefault() 的时机。
典型陷阱：
- 写了
e.preventDefault()却没做任何校验，导致用户完全感知不到字段错误 - 校验通过后手动调用
form.submit()—— 这会绕过所有 HTML5 校验（包括reportValidity） - 异步提交（如
fetch）成功后没重置表单或清空错误状态，导致下次提交仍卡在旧错误
正确做法：把校验作为提交流程的第一步，失败就 return，成功再走后续逻辑：
form.addEventListener('submit', async (e) => {
if (!form.checkValidity()) {
form.reportValidity();
return; // 阻止后续执行
}
e.preventDefault(); // 只在此处 prevent，确保校验已过
const res = await fetch('/api', {
method: 'POST',
body: new FormData(form)
});
if (res.ok) form.reset(); // 成功后重置，也清除了所有 <code>setCustomValidity</code> 状态
});
移动端和 Safari 的 reportValidity() 兼容性细节
reportValidity() 在 iOS Safari 15.4+ 和 Android Chrome 90+ 支持良好，但旧版 Safari（≤15.3）不支持，调用会静默失败，也不报错。
如果必须兼容老 Safari，得降级处理：
- 用
checkValidity()判断，再手动遍历form.elements找出validity.valid === false的字段 - 对每个无效字段，用
scrollIntoView({ block: 'center' })聚焦并添加 CSS 错误样式 - 避免依赖气泡提示，改用页面内提示（如
aria-live区域）
另外，iOS 上 input[type="number"] 的校验行为不一致（比如允许输入字母再删除），建议敏感场景改用 type="text" + pattern="[0-9]*" + JS 拦截。
真正容易被忽略的是：校验状态不会自动随 DOM 更新而刷新 —— 如果你用 JS 动态修改了 value 或 disabled，记得手动调用 checkValidity() 来同步内部 validity 状态，否则后续 reportValidity() 可能不准确。
