js实现重置
重置表单元素
使用 reset() 方法可以快速重置整个表单。该方法会将所有表单控件恢复为默认值。
document.getElementById("myForm").reset();清空输入字段
通过遍历表单元素并设置 value 属性为空字符串，可以逐个清空输入框。
const inputs = document.querySelectorAll("input");
inputs.forEach(input => {
input.value = "";
});重置选择框
对于 <select> 元素，需要将 selectedIndex 属性重置为默认选项。
const selects = document.querySelectorAll("select");
selects.forEach(select => {
select.selectedIndex = 0;
});清除复选框和单选按钮
通过设置 checked 属性为 false 来取消所有选择。
const checkboxes = document.querySelectorAll("input[type=checkbox]");
checkboxes.forEach(checkbox => {
checkbox.checked = false;
});
const radios = document.querySelectorAll("input[type=radio]");
radios.forEach(radio => {
radio.checked = false;
});重置文本区域
将 <textarea> 元素的 value 属性设置为空字符串。
const textareas = document.querySelectorAll("textarea");
textareas.forEach(textarea => {
textarea.value = "";
});使用事件监听器
为重置按钮添加点击事件监听器，执行重置操作。
document.getElementById("resetBtn").addEventListener("click", function() {
document.getElementById("myForm").reset();
});重置特定字段
通过指定字段名称来重置特定表单元素。
document.querySelector("input[name='username']").value = "";清除本地存储
如果需要清除与表单相关的本地存储数据，可以使用 localStorage.clear() 或移除特定项。
localStorage.removeItem("formData");重置表单验证状态
清除表单验证的错误状态和消息。
const form = document.getElementById("myForm");
form.classList.remove("was-validated");使用框架方法
在React等框架中，可以通过状态管理来重置表单。
// React示例
const [formData, setFormData] = useState(initialState);
const handleReset = () => {
setFormData(initialState);
};
