调用setcustomvalidity('')是清除自定义错误的唯一可靠方式，需同步重置aria-invalid、移除视觉样式、清空提示文案，并调用checkvalidity()刷新伪类状态，否则:invalid红框和无效状态将持续存在。
调用 setCustomValidity('') 是清除自定义错误的唯一可靠方式
浏览器不会自动“遗忘”你设过的错误文案。只要 input.setCustomValidity('邮箱格式错误') 被调过，哪怕用户已输入合法内容，该字段的 validity.valid 仍为 false，:invalid 伪类持续生效——除非你显式重置。
必须在每次校验逻辑结束时（比如 input 或 blur 事件中），对每个字段执行：
-
input.setCustomValidity('')—— 清空错误文案，让 validity 状态回归“可能有效” -
input.setAttribute('aria-invalid', 'false')—— 同步无障碍状态，读屏器才不会误报 -
input.classList.remove('is-invalid')—— 移除视觉错误样式（如红边框） -
errorElement.textContent = ''—— 清空预置的.invalid-feedback文案
漏掉其中任意一项，都会导致 UI、DOM 属性、无障碍提示三者不同步。
reset() 不会清除自定义错误，它只还原初始值
form.reset() 或点击 <button type="reset"></button> 只会把字段值恢复到页面加载时的 value、checked、selected 状态，完全不碰 setCustomValidity 设置的内容，也不重置 aria-invalid。
这意味着：如果用户之前触发过自定义错误，然后点重置按钮，表单看着空了，但字段依然被标记为无效，提交时仍会被拦截。
要真正清空校验状态，得在调用 reset() 后手动补上清理逻辑：
- 遍历所有
input、select、textarea - 对每个元素执行
el.setCustomValidity('') - 再统一设
el.setAttribute('aria-invalid', 'false') - 并清空对应错误提示区的文本
jQuery Validate 的 resetForm() 只对它自己管理的校验有效
如果你用的是 jQuery Validation 插件，$('#myForm').validate().resetForm() 或 $('#myForm').data('validator').resetForm() 确实能清空插件内部维护的错误状态和提示 DOM。
但它对原生 HTML5 校验（required、type="email"、setCustomValidity）完全无感——这些状态照常存在，:invalid 伪类不会消失，checkValidity() 仍返回 false。
所以混合使用原生验证 + jQuery Validate 时，必须两套逻辑都清理：
- 先调
validator.resetForm() - 再手动遍历字段，逐个执行
el.setCustomValidity('')和el.setAttribute('aria-invalid', 'false')
为什么清空后还是显示红框？关键在 checkValidity() 没触发
只设 setCustomValidity('') 并不能让 :invalid 样式立刻消失。浏览器需要一次“验证动作”来刷新伪类状态。
最稳妥的做法是：在清理完所有状态后，对每个字段调用 input.checkValidity()（注意不是 reportValidity()，后者会弹气泡）。
例如：
function clearFieldValidation(input) {
input.setCustomValidity('');
input.setAttribute('aria-invalid', 'false');
input.classList.remove('is-invalid');
input.nextElementSibling?.textContent = '';
input.checkValidity(); // ← 这一行才是让红框消失的关键
}
没这行，CSS 的 input:invalid:not(:placeholder-shown) 规则就卡在旧状态里不动——这也是最容易被忽略的一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
