dialog 里面的表单提交后,不关闭弹窗再执行reset 清空,方便再次添加表单数据,但是再填写的时候规则验证提示就有问题,正确输入值也验证提示
时间: 2024-10-19 16:08:04 浏览: 26
vue+elementUI实现表单和图片上传及验证功能示例
5星 · 资源好评率100%
在JavaScript的dialog表单提交后,如果希望保持弹窗打开以便用户继续输入而不需要每次清空后再重新填写,通常的做法是在表单提交成功后,手动触发`reset()`方法来清除已填入的数据。然而,这可能导致在下次验证新的输入时,由于表单字段的状态未恢复到初始状态,之前的验证规则可能不再适用。
例如,如果你有一个必填项的验证规则,在用户第一次填写并提交后,这个字段可能已经不再是必填了,因为清空后它默认为空。当用户重新开始填写,即使他们正确地填写了内容,如果没有正确处理先前的验证状态,系统可能会误报该字段为空。
解决这个问题的关键在于在`reset()`之前,需要先临时保存用户的输入状态,并在重新验证时检查是否满足这些条件。同时,可以在验证函数内部判断当前输入与之前的状态,如果匹配则跳过相应的错误提示。你可以这样做:
```javascript
let previousValues = {};
// 表单提交事件处理器
document.getElementById('yourForm').addEventListener('submit', function(e) {
e.preventDefault();
// 提交表单并保存部分数据
const formData = new FormData(this);
previousValues = { ...formData };
// 验证并提交
if (validateFormData(formData)) {
submitForm(formData);
}
});
// 重置表单并保留之前的部分状态
function resetWithPreviousValues() {
this.reset();
for (const key in previousValues) {
this.elements[key].value = previousValues[key];
}
}
// 验证函数
function validateFormData(formData) {
// 检查每个字段是否满足规则
return Object.keys(previousValues).every(key => formData.get(key) !== '' || !someValidationRule(formData.get(key)));
}
// 当需要重新开始填写时
resetWithPreviousValues.call(document.getElementById('yourForm'));
```
阅读全文