为什么我的onsubmit校验函数通过校验后无法提交表单？

问题原因 #

你在validate函数的第一行就全局调用了e.preventDefault()，该方法会直接取消表单的默认提交动作，无论后续校验逻辑是否通过，这个阻止提交的操作已经提前执行完成，因此即使校验全部通过返回true，表单也无法正常提交。

修复方案 #

有两种常用的修复方式，你可以任选其一：

方案1：仅在校验失败时调用e.preventDefault() #

调整preventDefault的执行位置，只在校验不通过的时候阻止提交行为，校验通过则不执行阻止逻辑，表单会正常提交：

function validate(e) {
  var pwd = document.getElementById("pwd").value;
  if (pwd.length < 8) {
    e.preventDefault();
    alert("Password not long enough");
    return false;
  } else if (pwd.search(/[a-z]/) < 0) {
    e.preventDefault();
    alert("Your password needs a lowercase letter");
    return false;
  } else if (pwd.search(/[A-Z]/) < 0) {
    e.preventDefault();
    alert("Your password needs an uppercase letter");
    return false;
  } else if (pwd.search(/[0-9]/) < 0) {
    e.preventDefault();
    alert("Your password requires a number. ");
    return false;
  } else {
    return true;
  }
}

方案2：删除e.preventDefault()，依赖onsubmit返回值控制提交 #

表单的onsubmit事件本身支持通过返回值控制提交行为：返回false时会自动阻止提交，返回true时会正常提交，因此你可以直接删除全局的e.preventDefault()调用即可，不需要调整其他逻辑：

function validate(e) {
  var pwd = document.getElementById("pwd").value;
  if (pwd.length < 8) {
    alert("Password not long enough");
    return false;
  } else if (pwd.search(/[a-z]/) < 0) {
    alert("Your password needs a lowercase letter");
    return false;
  } else if (pwd.search(/[A-Z]/) < 0) {
    alert("Your password needs an uppercase letter");
    return false;
  } else if (pwd.search(/[0-9]/) < 0) {
    alert("Your password requires a number. ");
    return false;
  } else {
    return true;
  }
}

原HTML代码无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Mohamed.S