当前位置：首页 > JavaScript

js重置表单实现

2026-03-15 18:54:00JavaScript

重置表单的方法

在JavaScript中，可以通过以下几种方式实现表单重置功能：

使用HTML的reset按钮 在表单内部添加一个type="reset"的按钮，点击后会自动重置表单：

<form id="myForm">
  <input type="text" name="username">
  <input type="reset" value="重置">
</form>

调用表单的reset()方法 通过JavaScript直接调用表单元素的reset()方法：

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

手动清空表单字段 如果需要更精细的控制，可以遍历表单元素并清空它们的值：

const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, select, textarea');

inputs.forEach(input => {
  if(input.type !== 'submit' && input.type !== 'reset') {
    input.value = '';
  }
});

注意事项

reset()方法会将表单恢复到页面加载时的初始状态，而不是清空所有字段
对于单选按钮和复选框，reset()会将它们恢复到默认选中状态
手动清空方法适用于需要将所有字段置空的情况
某些现代框架(如React、Vue)可能需要使用框架特定的方式重置表单状态

框架中的表单重置

在React中，可以使用受控组件的方式重置表单：

function MyForm() {
  const [formData, setFormData] = useState({username: ''});

  const handleReset = () => {
    setFormData({username: ''});
  };

  return (
    <form>
      <input 
        value={formData.username}
        onChange={(e) => setFormData({...formData, username: e.target.value})}
      />
      <button type="button" onClick={handleReset}>重置</button>
    </form>
  );
}

在Vue中可以使用v-model配合方法重置：

js重置表单实现

export default {
  data() {
    return {
      form: {
        username: ''
      }
    }
  },
  methods: {
    resetForm() {
      this.form = { username: '' };
    }
  }
}