checkvalidity() 仅校验不触发样式，需 reportvalidity() 或手动处理；对 disabled 元素恒返 true；动态添加字段须用 form.append 而非 innerhtml；setcustomvalidity("") 才能清除自定义错误；框架中需等 dom 同步后再调用。
checkValidity() 返回 false 却没看到红框或提示？
浏览器默认只在用户交互（如提交、失焦）后才触发视觉反馈，checkValidity() 本身不触发样式更新或弹出提示。调用后返回 false，但输入框没变红、也没报错文案，这是正常行为——它只做校验，不负责呈现。
- 必须手动调用
reportValidity()才能触发默认错误气泡和红边框 - 或者自己读取
element.validationMessage+ 操作 DOM 显示提示 -
checkValidity()对disabled元素始终返回true，哪怕它有required
为什么 form.checkValidity() 有时返回 true，但 submit 仍被阻止？
表单级 checkValidity() 只检查**当前未被 disabled 且通过 willValidate === true 判定的控件**。常见漏检点：
- 动态添加的字段未调用
form.append(input)后再设required，而是直接 innerHTML 插入——新元素不会自动纳入验证流程 - 使用了
type="number"但用户输入了 "123abc"：此时valueAsNumber为NaN，但value非空，checkValidity()可能返回true（取决于浏览器），而原生 submit 会拦截 - 自定义 validity 状态被覆盖：比如先调用
input.setCustomValidity("xxx")，之后又调用input.setCustomValidity("")，但忘记重置其他状态
setCustomValidity("") 后 checkValidity() 还是 false？
清空自定义错误必须用空字符串 ""，不能用 null、undefined 或空格字符串 " "。只要 setCustomValidity() 被调用过一次，该字段就进入“自定义验证模式”，后续必须显式传入 "" 才能恢复原生校验逻辑。
- 错误写法：
input.setCustomValidity(null)→ 依然阻塞，validationMessage变成 "Invalid field." - 正确写法：
input.setCustomValidity("")→ 恢复对required、pattern等原生规则的响应 - 建议搭配事件清理：在
input或blur时统一重置，避免残留
在 Vue/React 中调用 checkValidity() 失效？
框架的异步更新机制可能导致你调用 checkValidity() 时 DOM 尚未同步。例如在 Vue 的 nextTick 之前、或 React 的 setState 回调外直接查，拿到的是旧状态。
- Vue：确保在
nextTick或mounted后操作 ref 元素 - React：用
useEffect监听依赖 +ref.current，或在事件回调末尾调用（如onSubmit内） - 绕过框架直接操作 DOM 时，务必确认元素已挂载且
type、required等属性已真实写入 HTML 属性（而非仅 JS 对象属性）
console.log(input.validity)，比猜强得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
