js重置表单实现

重置表单的方法

在JavaScript中，可以通过多种方式重置表单。以下是几种常见的方法：

使用HTML的reset按钮

在表单中添加一个类型为reset的按钮，点击后会重置表单内的所有输入字段到初始值。

<form id="myForm">
  <input type="text" name="username" value="初始值">
  <input type="reset" value="重置表单">
</form>

调用表单的reset方法

通过JavaScript代码调用表单元素的reset()方法，可以动态重置表单。

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

使用jQuery重置表单

如果项目中使用了jQuery，可以通过以下方式重置表单：

$('#myForm')[0].reset();
// 或者
$('#myForm').trigger('reset');

手动重置表单字段值

如果需要更灵活的控制，可以手动遍历表单字段并重置其值。

const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
  if (input.type === 'checkbox' || input.type === 'radio') {
    input.checked = input.defaultChecked;
  } else {
    input.value = input.defaultValue;
  }
});

注意事项

• reset()方法会将表单字段重置为初始值，而不是清空。
• 对于动态生成的表单字段，确保在调用reset()前已正确设置初始值。
• 手动重置时需考虑不同输入类型的处理方式（如复选框、单选按钮等）。