表单验证通过后无法触发form action跳转，需添加额外代码吗？

你遇到的核心问题很明确：你在表单的submit事件监听里直接调用了e.preventDefault()，这会无条件阻止表单的默认提交行为——哪怕所有输入验证都通过，浏览器也不会执行跳转到action="/login"的默认操作。

要解决这个问题，我们只需要调整逻辑：只有当验证不通过时才阻止默认提交，验证全部通过时让表单正常执行默认跳转。

具体修改步骤 #

1. 让验证函数返回布尔结果

首先需要调整你的验证函数（checkRequired、checkLength、checkEmail），让它们返回true或false，表示当前验证是否通过。示例如下：

// 检查必填项，返回是否全部填写
function checkRequired(inputs) {
  let isValid = true;
  inputs.forEach(input => {
    if (input.value.trim() === '') {
      // 显示对应错误信息（比如设置login-email-error的文本）
      document.getElementById(`${input.id}-error`).textContent = `${input.name} is required`;
      isValid = false;
    } else {
      // 验证通过时清除错误信息
      document.getElementById(`${input.id}-error`).textContent = '';
    }
  });
  return isValid;
}

// 检查输入长度，返回是否符合要求
function checkLength(input, min, max) {
  let isValid = true;
  if (input.value.length < min || input.value.length > max) {
    document.getElementById(`${input.id}-error`).textContent = `${input.name} must be between ${min} and ${max} characters`;
    isValid = false;
  } else {
    document.getElementById(`${input.id}-error`).textContent = '';
  }
  return isValid;
}

// 检查邮箱格式，返回是否合法
function checkEmail(input) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  let isValid = true;
  if (!emailRegex.test(input.value.trim())) {
    document.getElementById(`${input.id}-error`).textContent = 'Please enter a valid email';
    isValid = false;
  } else {
    document.getElementById(`${input.id}-error`).textContent = '';
  }
  return isValid;
}

2. 修改submit事件监听逻辑

在事件回调里，先执行所有验证，只有当任意一项验证失败时，才调用e.preventDefault()阻止提交；全部通过则让表单执行默认跳转：

const form = document.getElementById('loginForm');
const loginEmail = document.getElementById('loginEmail');
const loginPassword = document.getElementById('loginPassword'); // 注意变量名要和DOM元素ID一致

form.addEventListener('submit', function (e) {
  // 执行所有验证并获取结果
  const requiredValid = checkRequired([loginEmail, loginPassword]);
  const emailLengthValid = checkLength(loginEmail, 3, 34);
  const pwdLengthValid = checkLength(loginPassword, 6, 25);
  const emailFormatValid = checkEmail(loginEmail);

  // 所有验证都通过时，才允许表单默认提交
  const allValid = requiredValid && emailLengthValid && pwdLengthValid && emailFormatValid;
  
  if (!allValid) {
    e.preventDefault(); // 验证不通过，阻止默认提交
  }
  // 验证通过时，不调用preventDefault，表单会自动跳转到action指定的地址
});

额外注意点 #

• 确保你的变量名和DOM元素ID一致（比如原来的loginPwd要改成loginPassword，对应HTML里的id="loginPassword"），避免出现变量未定义的错误。
• 验证通过时记得清除错误信息，避免用户修正后错误提示还残留。

内容的提问来源于stack exchange，提问作者KaranManral