17370845950

最快但有陷阱：只重置为HTML初始值，不触发事件，不重置JS修改值；form.reset()更可控；手动重置需分类型处理；重置后需手动清理验证状态。

用 最快但有陷阱

点击后自动把所有表单控件恢复到页面加载时的初始值，不需要写 JS。但注意：reset 不会触发 input 或 change 事件，也无法重置通过 JS 动态修改过的 value（比如用户输入后你又用 JS 改过一次），它只认 HTML 中写的 value 或 checked 等属性值。

常见错误：给 赋值后，用户改了内容，点 reset 又变回“默认值”——这其实是预期行为，不是 bug。

• 如果想重置成空值，HTML 中就别写 value 属性，或显式设为 value=""
• 同理，初始内容要写在标签体内，reset 才能清空： → 清空；旧内容 → 重置回“旧内容”
• 和 都只按 HTML 中的 selected / checked 属性重置

用 form.reset() 方法更可控

JS 调用原生方法，效果和点击 type="reset" 按钮完全一致，但可以绑定在任意事件上（比如按钮、链接、快捷键），也方便加逻辑判断。

document.getElementById('myForm').reset();

关键点：

• 必须在 DOM 加载完成后调用，否则找不到 form 元素
• 该方法不会阻止默认行为，也不抛错——哪怕 form 不存在，它只是静默失败
• 不重置自定义元素（如 Web Component 封装的输入框），只作用于原生表单控件
• 若表单里混用了 ，它也会被重置，这点常被忽略

手动重置需要绕开 defaultValue 的坑

当你要把所有字段设为特定值（比如全清空、或统一设为“-”），不能只靠 el.value = ""，因为 和 的设置方式不同，且 defaultValue 属性在运行时不会自动更新。

正确做法是逐类型处理：

• ：设 el.value = ""
• ：设 el.value = ""（不是 textContent）
• ：设 el.selectedIndex = 0，或遍历 options 找到 defaultSelected === true 的项并选中
• ：设 el.checked = false（注意：只影响当前元素，不批量操作）
• ：只能设 el.value = ""（实际无效），必须用 el.outerHTML = el.outerHTML 或新建 clone 替换

重置时要注意表单验证状态

reset() 不会清除浏览器自动添加的 :valid / :invalid 状态，也不会移除 setCustomValidity("") 后的校验结果。用户点完 reset，再立刻提交，可能仍看到红框或报错提示。

解决办法是重置后手动清理：

const form = document.getElementById('myForm');
form.reset();
// 清除所有控件的验证状态
form.querySelectorAll('input, select, textarea').forEach(el => {
  el.setCustomValidity('');
  el.reportValidity(); // 触发重新校验，让 UI 更新
});

注意：reportValidity() 会立即校验并显示提示，如果不想弹提示，可先 el.checkValidity() 再忽略返回值。

真正麻烦的是那些用了第三方校验库（如 Yup + Formik）或自定义 dirty 标记的场景——reset 只管 DOM，不管业务状态，这部分必须手动同步。