JavaScript中表单验证通过后如何实现表单提交？

你的代码里e.preventDefault()会无条件阻止表单提交，所以需要在所有验证通过时手动触发表单提交，以下是具体修改方案：

1. 让checkInputs返回验证状态 #

修改checkInputs函数，新增一个变量跟踪所有字段的验证结果，最后返回这个状态：

function checkInputs() {
  // trim 去除首尾空格
  const usernameValue = username.value.trim();
  const emailValue = email.value.trim();
  const passwordValue = password.value.trim();
  let isValid = true; // 标记是否所有字段验证通过

  if (usernameValue === '') {
    setErrorFor(username, 'Full name cannot be blank');
    isValid = false;
  } else {
    setSuccessFor(username);
  }

  if (emailValue === '') {
    setErrorFor(email, 'Email cannot be blank');
    isValid = false;
  } else if (!isEmail(emailValue)) {
    setErrorFor(email, 'Not a valid email');
    isValid = false;
  } else {
    setSuccessFor(email);
  }

  if (passwordValue === '') {
    setErrorFor(password, 'Roll number cannot be blank');
    isValid = false;
  } else if (passwordValue.length < 10) {
    setErrorFor(password, 'Roll number must be 10 digits');
    isValid = false;
  } else {
    setSuccessFor(password);
  }

  return isValid; // 返回最终验证结果
}

2. 根据验证结果决定是否提交表单 #

修改表单的submit事件监听逻辑，当验证通过时手动调用form.submit()：

form.addEventListener('submit', e => {
  e.preventDefault();

  const isFormValid = checkInputs();
  if (isFormValid) {
    form.submit(); // 验证通过，手动提交表单
  }
});

可选优化：修复语义化问题 #

注意到你HTML里“Roll Number”对应的input id是password，这不符合语义化，建议修改为rollNumber，同时同步调整JavaScript代码：

HTML修改： #

<div class="form-control">
  <label for="rollNumber">Roll Number</label>
  <input type="text" maxlength="10" placeholder="Roll Number" id="rollNumber" />
  <i class="fas fa-check-circle"></i>
  <i class="fas fa-exclamation-circle"></i>
  <small>Error message</small>
</div>

JavaScript修改： #

const rollNumber = document.getElementById('rollNumber');

// 在checkInputs中替换相关逻辑：
const rollNumberValue = rollNumber.value.trim();

if (rollNumberValue === '') {
  setErrorFor(rollNumber, 'Roll number cannot be blank');
  isValid = false;
} else if (rollNumberValue.length < 10) {
  setErrorFor(rollNumber, 'Roll number must be 10 digits');
  isValid = false;
} else {
  setSuccessFor(rollNumber);
}

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