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('');
});
