在 HTML 中使用 javascript 进行表单验证

Question

我一直在查看表单验证的一些示例，其中无效的输入将阻止用户进入下一页。 我多次看到这样做的方式是使用 event.preventDefault() function，但它似乎对我不起作用。 我不确定 javascript function 是否错误，或者根本没有被阅读。 当我发送无效输入时，它无论如何都会进入下一页。

这是我的 HTML 代码：

Header：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="3.css"/>
<script type="text/javascript" src="3.js"></script>
<title>Login</title>

身体：

<section>
    <h2>Login</h2>
    <div id="loginInfo">

    <form id="loginForm" method="post" action="nextpage.php" enctype="multipart/form-data">
        <table id="loginTable">
            <tr>
                <td>
                    <input type="text" class="loginInput" id="loginEmail" name="loginEmail" placeholder="Email">
                </td>
            </tr>
            <tr>
                <td><label id="emailError" class="errorMsg"></label></td>
            </tr>
            <tr>
                <td>
                    <input type="password" class="loginInput" id="loginPassword" name="loginPassword" placeholder="Password">
                </td>
            </tr>
            <tr>
                <td><label id="passError" class="errorMsg"></label></td>
            </tr>
            <tr>
                <td></br><input type="submit" name="submit" id="loginSubmit" value="Login"></td>
            </tr>
        </table>
    </form>
    </div>
</section>

这是引用的 3.js 代码：

document.getElementById("loginForm").addEventListener("submit", loginFunction, false);

function loginFunction(event)
{
    var valid= true;

    var elements= event.currentTarget;
    var email= elements[0].value;
    var pass= elements[1].value;

    var regexEmail= /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; 
    var regexPass= /^(\S*)?\d+(\S*)?\W+$/;

    var emailError= document.getElementById(emailError);
    var passError= document.getElementById(passError);

    if (email == null || email == ""){
        emailError.innerHTML= "Email is empty";
        valid= false;
    }
    else if (regexEmail.test(email) == false){
        emailError.innerHTML= "Incorrect Email format";
        valid= false;
    }

    if (pass == null || pass == ""){
        passError.innerHTML= "Password is empty.";
        valid = false;
    }
    else if (regexPass.test(pass) == false) {
        passError.innerHTML= "Incorrect password format";
        valid = false;
    }
    else if (pass.length < 8){
        passError.innerHTML= "Password is too short, must be 8+ characters";
        valid= false;
    }

    if (valid == false){
        event.preventDefault();
    }
}

谁能解释我在哪里犯了错误？

Answer 1

这应该可以解决问题：

<section>
    <h2>Login</h2>
    <div id="loginInfo">    
    <form id="loginForm" method="post" action="nextpage.php" enctype="multipart/form-data">
        <table id="loginTable">
            <tr>
                <td>
                    <input type="text" class="loginInput" id="loginEmail" name="loginEmail" placeholder="Email">
                </td>
            </tr>
            <tr>
                <td><label id="emailError" class="errorMsg"></label></td>
            </tr>
            <tr>
                <td>
                    <input type="password" class="loginInput" id="loginPassword" name="loginPassword" placeholder="Password">
                </td>
            </tr>
            <tr>
                <td><label id="passError" class="errorMsg"></label></td>
            </tr>
            <tr>
                <td></br><input type="button" name="submit" id="loginSubmit" value="Login"></td>
            </tr>
        </table>
    </form>
    </div>
</section>

和这个：

document.getElementById('loginSubmit').addEventListener('click',loginFunction,false);
function loginFunction()
{
    var valid=true;
    var elements=event.currentTarget;
    var email=elements[0].value;
    var pass=elements[1].value;
    var regexEmail=/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; 
    var regexPass=/^(\S*)?\d+(\S*)?\W+$/;
    var emailError=document.getElementById(emailError);
    var passError=document.getElementById(passError);
    if(email==null||email=='')
    {
        emailError.innerHTML='Email is empty';
        valid=false;
    }
    else if(regexEmail.test(email)==false)
    {
        emailError.innerHTML='Incorrect Email format';
        valid=false;
    }
    if(pass==null||pass=='')
    {
        passError.innerHTML='Password is empty.';
        valid=false;
    }
    else if(regexPass.test(pass)==false) 
    {
        passError.innerHTML='Incorrect password format';
        valid=false;
    }
    else if(pass.length<8)
    {
        passError.innerHTML='Password is too short, must be 8+ characters';
        valid=false;
    }
    if(!valid)
    {
        return
    }
    document.getElementById('LoginForm').submit();  
}