JavaScript中表单验证成功后如何取消e.preventDefault()的阻止效果

开发者阿泽

2026-9-29

解决方案

你目前的代码逻辑是只要触发submit事件就直接阻止默认提交行为，没有区分验证结果，调整思路有两种：

方案1：验证失败才阻止默认提交

首先改造checkInputs()函数，让它返回布尔值：验证通过返回true，存在校验不通过项返回false，再调整事件监听逻辑：

form.addEventListener('submit',(e)=>{
  const validatePass = checkInputs();
  // 仅校验失败时阻止默认提交
  if (!validatePass) {
    e.preventDefault();
    return;
  }
  // 校验通过后执行成功提示，表单会自动走默认提交逻辑
  successMsg();
});

方案2：验证通过后主动触发提交

如果你的successMsg()包含异步逻辑（比如弹窗展示时长、动画等待），可以保留e.preventDefault()，验证完成后主动调用表单原生submit()方法，该方法不会再次触发submit事件监听，不会出现循环调用问题：

form.addEventListener('submit', async (e)=>{
  e.preventDefault();
  const validatePass = checkInputs();
  if (!validatePass) return;

  // 等待成功提示逻辑执行完成
  await successMsg();
  // 主动触发表单提交
  form.submit();
});