HTML5表单重置后原生校验红线不会自动消失，因reset仅还原值而不刷新验证状态；需手动调用checkValidity()或setCustomValidity('')清除，框架中须调用对应API如clearValidate()。
HTML5 表单重置时，原生校验的红线（即 :invalid 样式、aria-invalid="true"、红边框等）**不会自动消失**——这是最常见的误区。因为 form.reset() 或 <button type="reset"></button> 只还原字段值，不触发校验状态刷新，浏览器也不会主动清除 invalid 伪类或 validity 对象中的错误标记。
为什么重置后还有红框？
HTML5 验证是“惰性”的：浏览器只在你显式调用 checkValidity()、reportValidity() 或用户交互（如 blur）时，才更新 :invalid 样式和 aria-invalid 属性。重置操作本身不触发这些，所以视觉错误态残留。
正确清除原生校验红线的两种方式
✅ 推荐：重置后手动调用 checkValidity() 清理状态
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 对每个表单控件逐个调用
input.checkValidity()，它会强制刷新验证状态，并移除aria-invalid="true"和红边框 - 无需等待用户操作，立即生效，且兼容所有支持 HTML5 验证的浏览器
- 示例代码：
function resetAndClearValidation(form) {<br> form.reset(); // 先还原值<br> form.querySelectorAll('input, select, textarea').forEach(el => {<br> el.checkValidity(); // 触发状态刷新<br> });<br>}
✅ 替代方案：用 setCustomValidity('') 清空自定义错误
- 如果字段曾通过
el.setCustomValidity('格式错误')设置过自定义错误，仅checkValidity()不够，需先清空 - 安全写法是重置前或重置后统一执行：
el.setCustomValidity('') - 注意：该方法不影响原生 required/email 等规则的校验逻辑，只清除人工设置的错误提示
Vue / Element Plus 等框架中要注意什么
框架组件（如 <el-input></el-input>、<el-form></el-form>）通常封装了自己的校验状态，原生 reset() 对它们无效：
- 不要依赖
form.reset()清除el-form的红提示，必须调用formRef.clearValidate() - 若混合使用原生 input 和框架组件，需分别处理：原生控件用
checkValidity()，框架组件调其 API - 推荐统一抽象：封装一个
resetForm(formEl, formRef?)函数，内部自动判断并清理两类状态
别踩坑：这些做法没用
- 给
<button type="reset"></button>绑event.preventDefault()→ 完全无效，reset不触发可阻止的事件 - 只改
value或textContent→ 值清了，但:invalid还挂着 - 删掉
required属性再加回来 → 过度复杂，且破坏语义和可访问性 - 用 CSS 强制隐藏红边框（如
input:invalid { border: none; }）→ 掩耳盗铃，校验逻辑仍在，提交仍失败
