js重置表单实现
使用 reset() 方法重置表单
通过调用表单元素的 reset() 方法可以快速重置表单内容到初始状态。该方法会清空所有用户输入，恢复默认值。
document.getElementById('myForm').reset();手动清空表单字段值
如果需要更灵活的控制，可以遍历表单元素并手动重置值。适用于需要部分保留或特殊处理的场景。
const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(element => {
if (element.type === 'checkbox' || element.type === 'radio') {
element.checked = false;
} else {
element.value = '';
}
});使用表单的默认值属性
某些表单元素可能设置了 defaultValue 或 defaultChecked 属性，可以直接恢复这些默认值。
const form = document.getElementById('myForm');
form.elements['username'].value = form.elements['username'].defaultValue;
form.elements['subscribe'].checked = form.elements['subscribe'].defaultChecked;通过重新加载表单重置
极端情况下可以重新加载包含表单的页面片段，但这种方法性能较差。
document.getElementById('formContainer').innerHTML =
document.getElementById('formContainer').innerHTML;使用框架特定的重置方法
在主流前端框架中，通常有专门的表单重置方法：
Vue示例：
this.$refs.form.resetFields();React示例：
this.setState({
formData: initialState
});注意事项
- 文件输入框需要特殊处理，因为安全限制不能通过JavaScript直接修改
- 使用reset()方法会触发reset事件，可以监听该事件进行额外操作
- 对于动态生成的表单元素，确保重置逻辑覆盖所有可能的情况
