邮箱格式写错后出现红字,用户改对了,红字一直在,提交按钮也还是灰的。非要刷新页面才能重新提交。日志里能对上时间点,这种反而好排。

错误信息只在校验失败时写入,输入变化时没有清空对应字段的状态。按钮的禁用条件读的还是上一次的错误集合,一直没被重算。这一点先确认清楚,后面就不用反复试。

input.addEventListener('input', () => {
  delete errors[input.name];
  input.classList.remove('is-error');
  submitBtn.disabled = Object.keys(errors).length > 0;
});

「错误提示残留」确认了原因之后,改动尽量只碰那一处,顺手改的东西后面最容易出问题。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。

报错里带路径的,先去看那个路径在不在、权限对不对。

处理上按这个顺序:在 input 事件里清掉当前字段的错误,再按需重新校验;按钮可用状态每次按最新错误集合计算,不缓存;提交成功或字段失焦时统一做一次状态归零。

结果对不对很好判断,故意输错再改对,红字随输入消失,提交按钮恢复可点并成功提交。

作者 9823189