js验证表单时出现只验证不提交或者直接提交不验证的问题

在进行js简单表单验证时，最开始是只能验证不能提交，部分代码如下：

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

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

function checkInputs() {
    // trim to remove the whitespaces
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();
    
    if(usernameValue === '') {
        setErrorFor(username, '用户名不能为空');
    } else {
        setSuccessFor(username);
    }
    
    if(emailValue === '') {
        setErrorFor(email, '邮箱不能为空');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, '邮箱格式不正常');
    } else {
        setSuccessFor(email);
    }
    
    if(passwordValue === '') {
        setErrorFor(password, '密码不能为空');
    } else {
        setSuccessFor(password);
    }
    
    if(password2Value === '') {
        setErrorFor(password2, '密码不能为空');
    } else if(passwordValue !== password2Value) {
        setErrorFor(password2, '两次密码不正确');
    } else{
        setSuccessFor(password2);
    }
}

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    formControl.className = 'form-control error';
    small.innerText = message;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}
    
function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

然后我改了一下，用if多重判断，复合条件后提交的方式，发现，不验证了，会直接提交，没有任何反馈，以下是js代码：

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

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

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

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

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



 function click1(){
     
     const usernameValue = username.value.trim();

     const emailValue = email.value.trim();

     const passwordValue = password.value.trim();

     const password2Value = password2.value.trim();
      
         
    if(usernameValue === '') {
        if(usernameValue === ''){

        setErrorFor(username, '用户名不能为空');

    } else {

        setSuccessFor(username);

    }
    } else if(emailValue === '') 
    
    {
         if(emailValue === '') {

        setErrorFor(email, '邮箱不能为空');

    } else if (!isEmail(emailValue)) {

        setErrorFor(email, '邮箱格式不正常');

    } else {

        setSuccessFor(email);

    }
    } else if(passwordValue === '') {
        if(passwordValue === '') {

        setErrorFor(password, '密码不能为空');

    } else {

        setSuccessFor(password);

    }
    } else if(password2Value === '') {
        
        if(password2Value === '') {

        setErrorFor(password2, '密码不能为空');

    } else if(passwordValue !== password2Value) {

        setErrorFor(password2, '两次密码不正确');

    } else{

        setSuccessFor(password2);

    }

}else {
             
            document.form.submit();
             
             }

 
         } 
     


function setErrorFor(input, message) {

    const formControl = input.parentElement;

    const small = formControl.querySelector('small');

    formControl.className = 'form-control error';

    small.innerText = message;

}



function setSuccessFor(input) {

    const formControl = input.parentElement;

    formControl.className = 'form-control success';

}

    

function isEmail(email) {

    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);

}

我该怎么改才能够在验证表单的前提下再提交到数据库！

有没有能够解答的

form 有表单验证，你看看下下面的例子， 逻辑有问题，表单验证也不是这种写法
https://www.runoob.com/try/try.php?filename=tryjs_form_validation