在前端开发中，表单是一个非常重要的组件。当我们需要清空表单中的所有字段时，JavaScript提供了一种简单而有效的方法：编写一个函数来实现这个功能。
为什么需要清除表单字段？
清除表单字段的原因可能有很多，例如：
- 用户输入错误并需要重新填写
- 表单被提交后需要清空以便下一次使用
- 重置表单以避免新旧数据混淆等等。
不管原因是什么，通过编写一个清除表单字段的函数，可以简化代码、提高代码的可读性和维护性。
实现清除表单字段的函数
下面是一个示例函数，它接收一个表单对象作为参数，并将该表单中的所有字段值设置为空字符串。
-- -------------------- ---- -------
-------- --------------------- -
----- ------------- - ----------------------------- --------- ---------
----------------------------- -- -
------ ------------ -
---- -------
---- -----------
---- --------
---- -----------
---- ---------
---- ------
---- ------
---- -------
---- --------
----------- - ---
------
---- ---------
---- --------
----------- - ----
------
---- -----------
---- --------
------------- - ------
------
---- -------------
---- ------------------
------------------- - ---
------
--------
----------- - ---
-
---
-该函数使用 querySelectorAll 方法来获取所有表单元素，并使用 forEach 方法对它们进行循环遍历。然后，根据输入类型来设置相应的值或属性。
在上面的示例中，我们使用了switch语句来处理不同类型的表单字段。文本输入、电子邮件、密码、搜索以及其他一些类型都将值设置为空字符串，而数字和范围类型将值设置为“0”。复选框和单选按钮则设置checked属性为false。下拉列表则将selectedIndex设置为-1，表示未选择任何选项。
需要注意的是，该函数并没有考虑到一些特殊情况，例如可能存在自定义表单元素等。如果您的表单包含自定义元素，则需要针对这些元素编写额外的代码。
如何调用清除表单字段的函数？
要清除表单字段，只需要在需要的时候调用 clearFormFields 函数传入表单对象参数即可。例如，可以在提交表单时调用该函数，以便在下一次使用表单之前重置它。
<form onsubmit="clearFormFields(this)"> <!-- 表单元素 --> </form>
结论
通过编写一个清除表单字段的函数，可以方便地重置表单，提高代码的可读性和维护性。上述示例代码已经足够大多数场景使用，但仍需注意特殊情况的处理，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9914
