Javascript表单验证按钮：表单有效后进入下一页

Question

我的表单验证工作正常，但表单有效后它不会进入下一页 当我点击提交按钮时 这是代码的html：

    <div class="header">
        <h2>Create Account</h2>
    </div>
    <form id="form" class="form" action="Iphone.html" method="post">
        <div class="form-control">
            <label for="username">Username</label>
            <input type="text" placeholder="Drake" id="username" />
            <i class="fas fa-check-circle"></i>
            <i class="fas fa-exclamation-circle"></i>
            <small>Error message</small>
        </div>
        <div class="form-control">
            <label for="username">Email</label>
            <input type="email" placeholder="applehub@gmail.com" id="email" />
            <i class="fas fa-check-circle"></i>
            <i class="fas fa-exclamation-circle"></i>
            <small>Error message</small>
        </div>
        <div class="form-control">
            <label for="username">Password</label>
            <input type="password" placeholder="Password" id="password"/>
            <i class="fas fa-check-circle"></i>
            <i class="fas fa-exclamation-circle"></i>
            <small>Error message</small>
        </div>
        <div class="form-control">
            <label for="username">Password check</label>
            <input type="password" placeholder="Password two" id="password2"/>
            <i class="fas fa-check-circle"></i>
            <i class="fas fa-exclamation-circle"></i>
            <small>Error message</small>
        </div>
        <input type="submit" value="Submit" name="">

        <a href="#" id="login"><p>Have an account? Login.</p></a>
    </form>
</div>

这里是 Javascript，我把提交按钮 e.preventDefault(); 但是当表单有效时我无法关闭它：

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, 'Username cannot be blank');
    } else {
        setSuccessFor(username);
    }
    
    if(emailValue === '') {
        setErrorFor(email, 'Email cannot be blank');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, 'Not a valid email');
    } else {
        setSuccessFor(email);
    }
    
    if(passwordValue === '') {
        setErrorFor(password, 'Password cannot be blank');
    } else {
        setSuccessFor(password);
    }
    
    if(password2Value === '') {
        setErrorFor(password2, 'Password2 cannot be blank');
    } else if(passwordValue !== password2Value) {
        setErrorFor(password2, 'Passwords does not match');
    } 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);
}```

Answer 1

确认验证无误后，需要手动重定向。

要重定向到另一个页面，您可以使用： window.location = "http://www.yoururl.com";

如果应用是SPA，使用browserhistory.push('/uri');

Answer 2

这是由e.preventDefault(); 引起的。如果调用此函数，则表单中的初始 action 将被“禁用”。

我认为在这种情况下，最好的情况是使用标志。
所以解决方案可能如下所示：

let is_form_checked = false;

form.addEventListener('submit', e => {
  if(!is_form_checked) {
    e.preventDefault();
    
    checkInputs();
    is_form_checked = true;
    
    //resubmit
  }
});