JS表单验证失败，但表单仍然提交？

Question

正如问题所暗示的那样，我有一个带有JS验证的HTML表单。现在，我仍在使用验证调试精细细节，但问题是onSubmit函数会在应该出现错误时触发错误，但表单会继续提交 - 我不知道为什么。我已经检查了StackOverflow上的百万和一个类似的问题，但似乎没有一个与我相同的原因 - 我已经检查并检查和检查。如果有人能提供帮助，我将非常感激。

另外，我知道我的代码可以缩短，但是当我解决这个问题时我会这样做。

形式：

<form name="registerForm" method="post" action="index.php" onSubmit="return validateForm()">

            <table class="formTable" >
            <tr>
                <td><i class="smallprint">* denotes a required field.</i></td>
            </tr>
            <tr>
                <td>
                    <input type="text" maxlength="32" width="32" name="regTxtUsrName">
                </td>
                <td>
                    User Name* <i class="smallprint"> &nbsp; between 6 and 32 characters (letters, numbers and underscores only)</i><br />
                    <b class="error" id="userNameError">Error: Please enter a user name between 6 and 32 characters, using letters, numbers and underscores</b>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" maxlength="32" width="32" name="regTxtFName">
                </td>
                <td>
                    First Name*<br />
                    <b class="error" id="fNameError">Error: Please enter your first name</b>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" maxlength="32" width="32" name="regTxtSName">
                </td>
                <td>
                    Surname*<br />
                    <b class="error" id="sNameError">Error: Please enter your surname</b>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" maxlength="32" width="32" name="regTxtEmail">
                </td>
                <td>
                    Email* &nbsp; <i class="smallprint">Please use a valid email address, it will be used to validate your account</i><br />
                    <b class="error" id="emailError1">Error: Please enter an email address<br /></b>
                    <b class="error" id="emailError2">Error: This is not a valid email address</b>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" maxlength="32" width="32" name="regTxtEmailConf">
                </td>
                <td>
                    Confirm Email*<br />
                    <b class="error" id="emailConfError">Error: Both email addresses must match</b>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" maxlength="32" width="32" name="regTxtPassword">
                </td>
                <td>
                    Password* &nbsp; <i class="smallprint">Between 6 and 32 characters, using at least one letter and one number</i><br />
                    <b class="error" id="passwordError">Error: Please enter a valid password</b>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" maxlength="32" width="32" name="regTxtPasswordConf">
                </td>
                <td>
                    Confirm Password*<br />
                    <b class="error" id="passwordConfError">Error: Both email passwords must match</b>
                </td>
            </tr>
            </table>
            <br />
            <div class="textCenter">
                <input type="checkbox" class="center" name="regChkTos"> - Check this box if you agree to the Terms of Service. You must agree in order to regster.
                <br />
                <br />
                <input type="submit" name="regSubmit" value="Register">
            </div>

        </form>

JS：

<script type="text/javascript">
    function validateForm()
    {   
        var noError = true;
        if (!validateUserName())
        {
            noError = false;
        }
        if (!validateFName())
        {
            noError = false;
        }
        if (!validateSName())
        {
            noError = false;
        }
        if (!validateEmail())
        {
            noError = false;
        }
        if (!validateConfirmEmail())
        {
            noError = false;
        }
        if (!validatePassword())
        {
            noError = false;
        }
        if (!validateConfirmPassword())
        {
            noError = false;
        }
        return noError;
    }

    function validateUserName()
    {
        var userName = document.forms["registerForm"]["regTxtUsrName"];
        var regex = /^\w+$/;
        if (userName.value==null || userName.value=="" || userName.value.length < 6 || !regex.test(userName.value))
        {
            userName.style.border = "2px solid red";
            document.getElementById('userNameError').style.display="inline";
            return false;
        }
        else
        {
            userName.style.border = "2px solid #0f0";
            document.getElementById('userNameError').style.display="none";
            return true;
        }
    }

    function validateFName()
    {
        var name = document.forms['registerForm']['regTxtFName'];
        if (name.value == null || name.value == '')
        {
            name.style.border = "2px solid red";
            document.getElementById('fNameError').style.display="inline";
            return false;
        }
        else
        {
            name.style.border = "2px solid #0f0";
            document.getElementById('fNameError').style.display="none";
            return true;
        }
    }

    function validateSName()
    {
        var name = document.forms['registerForm']['regTxtSName'];
        if (name.value == null || name.value == '')
        {
            name.style.border = "2px solid red";
            document.getElementById('sNameError').style.display="inline";
            return false;
        }
        else
        {
            name.style.border = "2px solid #0f0";
            document.getElementById('sNameError').style.display="none";
            return true;
        }
    }

    function validateEmail()
    {
        noError = true;
        var email = document.forms['registerForm']['regTxtEmail'];
        var atpos=email.value.indexOf("@");
        var dotpos=email.value.lastIndexOf(".");
        if (email.value == null || email.value == '')
        {
            email.style.border = '2px solid red';
            document.getElementById('emailError1').style.display='inline';
            noError = false;
        }
        else
        {
            document.getElementById('emailError1').style.display='none';
            if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.value.length)
            {
                email.style.border = '2px solid red';
                document.getElementById('emailError2').style.display='inline';
                noError = false;
            }
            else
            {
                email.style.border = '2px solid #0f0';
                document.getElementById('emailError2').style.display='none';
            }
        }
        return noError
    }

    function validateConfirmEmail()
    {
        var email = document.forms['registerForm']['regTxtEmail'];
        var emailConf = document.forms['registerForm']['regTxtEmailConf'];
        if (email.value != emailConf.value)
        {
            emailConf.style.border = '2px solid red';
            document.getElementById('emailConfError').style.display = 'inline';
            return false
        }
        else
        {
            emailConf.style.border = '2px solid 0f0';
            document.getElementById('emailConfError').style.display = 'none';
            return true
        }
    }

    function validatePassword()
    {
        var password = document.forms['registerForm']['regTxtPassword'];
        if (password.value == null || password.value == '' || password.value.length < 6 || password.value.search(/\d/) == -1 || password.value.search(/[A-z]/) == -1)
        {
            password.style.border = '2px solid red';
            document.getElementById('passwordError').style.display = 'inline';
            return false;
        }
        else
        {
            password.style.border = '2px solid 0f0';
            document.getElementById('passwordError').style.display = 'none';
            return true;
        }
    }

    function validatePasswordConf()
    {
        var password = document.forms['registerForm']['regTxtPassword'];
        var passwordConf = document.forms['registerForm']['regTxtPasswordConf'];
        if (password.value != passwordConf.value)
        {
            passwordConf.style.border = '2px solid red';
            document.getElementById('passwordConfError').style.display = 'inline';
            return false;
        }
        else
        {
            passwordConf.style.border = '2px solid 0f0';
            document.getElementById('passwordConfError').style.display = 'none';
            return true;
        }
    }
    </script>

是的，此脚本位于表单所在的HTML页面上。我将每个字段留空，点击提交，暂时弹出错误，然后调用action="index.php"。

感谢您提供任何帮助。

Answer 1

首先你需要知道bug的位置。 为此，在每个函数上使用console.log。 之后，您的代码可以使用更好的算法和正则表达式进行优化。 要知道问题的位置，请检查每个函数的每次返回。 对于主要功能，我会做那样的事情：

function validateForm(){   
    if (validateUserName() && validateFName() && validateSName() && validateEmail() && validateConfirmEmail() && validatePassword() && validateConfirmPassword()){
        return true;
    }
    return false;
}

编辑：检查主函数的值。 你有这个页面的链接吗？