表单重置后 :valid/:invalid 伪类不自动更新，需在 reset 事件的微任务中调用 checkValidity() 强制重校验并触发布局重绘；对单个元素或整个表单调用均可，但须确保 DOM 已更新且自定义错误已清空。
表单重置后 :valid 和 :invalid 伪类不重新计算
这是浏览器原生行为：调用 form.reset() 或点击 <input type="reset"> 后，表单控件的值被清空或重置，但其 validity 状态（如 validity.valid）不会自动触发 CSS 重绘。CSS 伪类 :valid 和 :invalid 依赖于该状态，因此样式“卡在重置前”——比如一个之前输入错误的 <input required> 重置后仍显示红色边框。
手动触发 validity 重计算需调用 checkValidity()
checkValidity() 不仅返回布尔值，还会强制浏览器更新内部 validity 状态，并同步触发布局和样式重绘。关键点在于：它必须在重置后、且目标元素已获得新值（哪怕是空值）后再调用。
- 对单个
<input>调用：inputElement.checkValidity() - 对整个
<form></form>调用：formElement.checkValidity()（会遍历所有可校验子元素） - 注意：不能在
reset事件回调中立即调用 —— 此时 DOM 值可能尚未同步，需加微任务延迟
重置后刷新校验的可靠写法（含防抖与兼容）
以下是在 reset 事件中安全刷新样式的最小可行方案：
document.querySelector('form').addEventListener('reset', (e) => {
// 确保 DOM 已更新，再检查有效性
Promise.resolve().then(() => {
const form = e.target;
// 方式一：只刷新 visible 且可校验的字段（推荐）
form.querySelectorAll('input:not([type="hidden"]):not([type="button"]):not([type="submit"]), select, textarea')
.forEach(el => el.checkValidity());
// 方式二：直接调用 form.checkValidity()（部分老浏览器不支持，但现代浏览器 OK）
// form.checkValidity();
});
});
说明：
立即学习“前端免费学习笔记（深入）”；
-
Promise.resolve().then(...)比setTimeout(..., 0)更精准，确保在 DOM 更新后的 microtask 阶段执行 - 过滤掉
type="hidden"等无需视觉反馈的控件，避免无谓调用 - 若使用了自定义校验（
setCustomValidity()），重置后需先清空自定义错误：el.setCustomValidity('')，否则checkValidity()仍返回false
为什么 input.value = '' + dispatchEvent(new Event('input')) 不够
手动赋值并派发事件能更新视图，但无法重置 validity 对象的底层状态（例如 validity.valueMissing 在 required 字段为空时仍为 true，即使 DOM 值已清空）。只有 checkValidity() 或用户真实交互（如聚焦后失焦）才会触发完整校验流程。
-
input.value = ''只改值，不改 validity 缓存 -
input.reportValidity()会弹出提示框，不适合静默重置场景 -
input.validity是只读对象，无法直接修改
真正起作用的，始终是 checkValidity() 这个“校验触发器” —— 它让浏览器回看当前值、重新跑一遍约束规则、更新 validity、再通知 CSS 引擎重绘伪类。
