javascript - 如何使表单仅在所有函数返回 true 时才提交？

Question

我希望我的表单仅在我的所有 JavaScript 函数都返回 true 时才提交。

这是我的 Javascript 代码:

function validateUserName(NewUser)
{
    var u = document.forms["NewUser"]["user"].value
    var uLength = u.length;
    var illegalChars = /\W/; // allow letters, numbers, and underscores
    if (u == null || u == "")
    {
        alert("You left Username field empty");
        return false;
    }
    else if (uLength <4 || uLength > 11)
    {
        alert("The Username must be between 4 and 11 characters");
        return false;
    }
    else if (illegalChars.test(u)) 
    {
        alert("The username contains illegal characters");
        return false;
    }
    else
    {
        return true;
    }
}


function validatePassword(NewUser)
{
    var p = document.forms["NewUser"]["pwd"].value
    var cP = document.forms["NewUser"]["confirmPwd"].value
    var pLength = p.length;
    if (p == null || p == "")
    {
        alert("You left the password field empty");
        return false;
    }
    else if (pLength < 6 || pLength > 20)
    {
        alert("Your password must be between 6 and 20 characters in length");
        return false;
    }
    else if (p != cP)
    {
        alert("The passwords do not match!");
        return false;
    }
    else
    {
        return true;
    }
}

function validateEmail(NewUser)
{
    var e = document.forms["NewUser"]["email"].value
    var eLength = e.length;
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (eLength == "" || eLength == null) 
    {

        alert("You left the email field blank!");
        return false;
    } 
    else if (e.match(illegalChars)) 
    {

        alert("ILEGAL CHARECTORS DETECTED EXTERMINATE");
        return false;
    } 
    else 
    {
        return true;
    }
}
function validateFirstName(NewUser)
{
    var f = document.forms["NewUser"]["fName"].value;
    var fLength = f.length;
    var illegalChars = /\W/;

    if(fLength > 20)
    {
        alert("First Name has a max of 20 characters");
        return false;
    }
    else if (illegalChars.test(f))
    {
        alert("Numbers,letter and underscores in first name only");
        return false;
    }
    else 
    {
        return true;
    }


}

function validateLastName(NewUser)
{
    var l = document.forms["NewUser"]["lName"].value;
    var lLength = l.length;
    var illegalChars = /\W/;

    if(lLength > 100)
    {
        alert("Last Name has a max of 100 characters");
        return false;
    }
    else if (illegalChars.test(f))
    {
        alert("Numbers,letter and underscores in last name only");
        return false;
    }
    else 
    {
        return true;
    }


}

function validateForm()
{
    //call username function
    validateUserName();

    //call password function
    validatePassword();

    //call email function
    validateEmail();

    //call first name function
    validateFirstName();

    //call first name function
    validateLastName();
}

这是我的 HTML:

<table id = "SignUpTable">
        <p id = "SubHeading">Sign Up.</p>
            <form name = "NewUser" onsubmit= "validateForm()" action = "">
                <tr>
                <td class = "FieldName">Username:</td> 
                <td class = "TextField"><input type = "text" name = "user"/></td> 
                </tr>
                <tr>
                <td class = "Information"><em>Must be 4-11 characters.<br/>Only numbers, letters and underscores.</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Email:</td> 
                <td class = "TextField"><Input type = "text" name = "email"/></td>
                <tr>
                <td  class = "Information"><em>We need this to verify your account.</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Password:</td>
                <td class = "TextField"><input type = "password" name = "pwd"/></td>
                <tr>
                <td  class = "Information"><em>6-20 characters</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Confirm Password:</td>
                <td class = "TextField"><input type = "password" name = "confirmPwd"/></td>
                <tr>
                <td  class = "Information"><em>just in case you didn't make mistakes!</em></td>
                </tr>

                <!-- Optional -->


                <tr>
                <td class = "FieldName">First Name:</td>
                <td class = "TextField"><input type = "text" name = "fName"/></td>
                <tr>
                <td  class = "Information"><em>optional</em></td>
                </tr>

                <tr>
                <td class = "FieldName">Lastname:</td>
                <td class = "TextField"><input type = "text" name = "lName"/></td>
                <tr>
                <td  class = "Information"><em>(optional)</em></td>
                </tr>

                <tr>
                <td><input type = "submit" value = "Submit"/></td>
                </tr>

        </table>



            </form>
    </div>

这是一个 JS fiddle :

http://jsfiddle.net/vK9aJ/

(请忽略表格中的错误尺寸)

Answer 1

function validateForm() {
    if(validateUserName() && validatePassword() && validateEmail() && validateFirstName() && validateLastName()) return true;
    else return false;
}

根据函数的返回值，您可以选择是否提交表单。