如何在表单校验通过后绕过preventDefault完成表单提交

你只需要让校验函数返回校验是否通过的布尔状态，校验通过时手动调用表单原生的submit()方法即可，手动调用submit()不会触发你绑定的submit事件监听器，不会出现重复拦截的死循环问题。

具体修改步骤 #

• 1. 改造checkInputs、checkInputsLogin函数，新增校验状态返回值
     两个函数内部新增变量标记校验是否通过，只要出现任意字段校验失败就将标记设为false，最后返回这个标记值。
• 2. 改造submit事件监听逻辑，校验通过时触发表单提交
     在事件回调中拿到校验函数的返回值，返回true时直接调用表单的submit()方法完成提交。

修改后的完整代码 #

// Script Validasi Form Daftar dan Masuk
const form = document.getElementById('formRegister');
const registerNama = document.getElementById('registerNama');
const registerEmail = document.getElementById('registerEmail');
const registerPassword = document.getElementById('registerPassword');
const registerPassword2 = document.getElementById('registerPassword2');

const formLogin = document.getElementById('formLogin');
const loginEmail = document.getElementById('loginEmail');
const loginPassword = document.getElementById('loginPassword');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  // 校验通过则提交
  if(checkInputs()) {
    form.submit();
  }
});

formLogin.addEventListener('submit', (e) => {
  e.preventDefault();
  // 校验通过则提交
  if(checkInputsLogin()) {
    formLogin.submit();
  }
});

function checkInputs() {
  // 新增校验状态标记，默认通过
  let isValid = true;
  // Nangkep Value dar input
  const namaValue = registerNama.value; 
  const emailValue = registerEmail.value.trim();
  const passwordValue = registerPassword.value.trim();
  const password2Value = registerPassword2.value.trim();

  if(namaValue === '') {
    setErrorFor(registerNama, 'Masukkan nama anda');
    isValid = false;
  }else{
    setSuccessFor(registerNama);
  }

  if(emailValue === '') {
    setErrorFor(registerEmail, 'Masukkan email anda');
    isValid = false;
  }else{
    setSuccessFor(registerEmail);
  }

  if(passwordValue === '') {
    setErrorFor(registerPassword, 'Masukkan password anda');
    isValid = false;
  }else if(!isRegisterPassword(passwordValue)){
    setErrorFor(registerPassword, ' ');
    isValid = false;
  }else{
    setSuccessFor(registerPassword);
  }

  if(password2Value === '') {
    setErrorFor(registerPassword2, 'Masukkan kata sandi anda');
    isValid = false;
  } else if(passwordValue !== password2Value){
    setErrorFor(registerPassword2, 'Kata sandi anda tidak cocok.');
    setErrorFor(registerPassword, ' ');
    isValid = false;
  }else if(!isRegisterPassword2(password2Value)){
    setErrorFor(registerPassword2, 'Kata sandi minimal 8 karakter.');
    isValid = false;
  }else{
    setSuccessFor(registerPassword2);
  }
  // 返回校验结果
  return isValid;
}

function checkInputsLogin() {
  // 新增校验状态标记，默认通过
  let isValid = true;
  // Nangkep Value dar input
  const emailValue = loginEmail.value.trim(); 
  const passwordValue = loginPassword.value.trim();

  if(emailValue === '') {
    setErrorFor(loginEmail, 'Masukkan email anda');
    isValid = false;
  }else{
    setSuccessFor(loginEmail);
  }

  if(passwordValue === '') {
    setErrorFor(loginPassword, 'Masukkan password anda');
    isValid = false;
  }else if(!isLoginPassword(passwordValue)){
    setErrorFor(loginPassword, 'Kata sandi minimal 8 karakter.');
    isValid = false;
  }else{
    setSuccessFor(loginPassword);
  }
  // 返回校验结果
  return isValid;
}

function setErrorFor(input, message) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');

  // error message
  small.innerText = message;

  // error class
  formControl.className = 'form-control-akun error'
}

function setSuccessFor(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control-akun success'
}

function isRegisterPassword(registerPassword){
  return /.{8,}$/.test(registerPassword);
}
function isRegisterPassword2(registerPassword2){
  return /.{8,}$/.test(registerPassword2);
}

function isLoginPassword(loginPassword){
  return /.{8,}$/.test(loginPassword);
}

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