form.reset() 清不掉校验提示，因其仅恢复HTML初始值，不重置框架（如Element UI、Ant Design）或自定义组件（如Quill）的校验状态；需配合clearValidate()、resetFields()或手动调用setCustomValidity('')等方法。
form.reset() 为什么清不掉校验提示
因为 form.reset() 只恢复 HTML 初始值，不触发表单校验状态重置逻辑。它对 Element UI、Ant Design、VeeValidate 等框架的校验提示完全无效——那些红字是组件内部维护的状态，不是 DOM 属性。原生表单也没有“校验提示”这个概念，所以浏览器根本不管。
clearValidate() 必须配合 resetFields() 或手动清空
在 Vue + Element UI 场景下，clearValidate() 只擦红字，不改数据；resetFields() 才是真正“清数据 + 清红字 + 触发响应式更新”的组合动作。但注意：resetFields() 要求表单必须通过 ref 正确绑定，且字段名需与 model 键一致。
- ✅ 正确调用：
formRef.value.resetFields()（Vue 3 setup 语法） - ❌ 错误写法：
formRef.resetFields()（formRef是 ref 对象，不是 form 实例） - ⚠️ 注意：如果表单里有动态插入的字段（比如点击“添加地址”后追加的 input），
resetFields()默认不处理它们，得手动设formData.addressList = []再调用
原生 HTML 表单怎么清校验提示
原生表单没有内置校验提示清除 API，checkValidity() 和 reportValidity() 都只负责触发和检查，不提供“清空错误气泡”的方法。你只能靠 DOM 操作手动干掉：
- 对每个
input/select/textarea调用el.setCustomValidity('')，这是清除ValidityState中自定义错误的唯一方式 - 再调用
el.reportValidity()不会显示错误，但也不会自动隐藏已有气泡；要彻底移除，得用el.classList.remove('invalid')配合 CSS 隐藏 - 更稳妥的做法是：先
form.reset()，再遍历所有字段执行el.setCustomValidity('')，最后强制重绘（如el.blur()）
混用框架和原生 DOM 时最容易漏掉的点
比如你在 Element UI 表单里嵌了一个富文本编辑器（如 Quill），它的内容存在 textarea 或自定义容器中。此时 resetFields() 完全不感知它，form.reset() 也拿它没辙。结果就是：表单看着清空了，但编辑器里还留着上一次的内容。
立即学习“前端免费学习笔记（深入）”；
- 必须单独处理：调用编辑器实例的
editor.root.innerHTML = ''或对应 API - Vue 场景下，还要同步清空绑定的
v-model数据，否则下次打开弹窗会重新渲染旧内容 - Ant Design 的
Form.Item如果用了noStyle或自定义子组件，resetFields()同样失效，得用form.setFieldsValue({ fieldName: undefined })
