Js实现reset

重置表单元素

在JavaScript中重置表单可以通过调用表单元素的reset()方法实现。该方法会将所有表单控件恢复到初始值。

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

手动重置表单字段

如果需要更精细的控制，可以手动将每个表单字段的值设置为默认值或空值。

const form = document.getElementById('myForm');
form.elements['username'].value = '';
form.elements['password'].value = '';
form.elements['remember'].checked = false;

重置表单样式

除了重置表单值外，有时还需要清除表单相关的样式和验证状态。

const form = document.getElementById('myForm');
form.classList.remove('was-validated');
form.querySelectorAll('.is-invalid').forEach(el => {
  el.classList.remove('is-invalid');
});

使用事件监听器

可以为重置按钮添加事件监听器来处理重置逻辑。

document.getElementById('resetBtn').addEventListener('click', function() {
  document.getElementById('myForm').reset();
  // 其他重置逻辑
});

框架特定方法

在使用前端框架时，可能需要使用框架特定的方法：

React示例

const [formData, setFormData] = useState(initialState);

const handleReset = () => {
  setFormData(initialState);
};

Vue示例

methods: {
  resetForm() {
    this.$refs.form.reset();
    // 或手动重置数据
    Object.assign(this.formData, this.initialData);
  }
}

清除表单验证信息

现代浏览器支持表单验证API，重置时可能需要清除验证消息。

const form = document.getElementById('myForm');
form.querySelectorAll('input').forEach(input => {
  input.setCustomValidity('');
});