如果所有函数都返回true，如何使表单仅提交？答案

【问题标题】：How to make form only submit if all functions return true?如果所有函数都返回true，如何使表单仅提交？
【发布时间】：2013-05-02 10:12:02
【问题描述】：

我希望我的表单仅在我的所有 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/

（请忽略表格中的错误尺寸）

【问题讨论】：

请不要粘贴整个代码。只粘贴您被删除的代码。
你发布的jsfiddle里面没有代码
对不起，不会再这样做了。

标签： javascript html forms validation

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你也可以这样优化之前的答案：

如果您的某个函数返回 false，则表达式将设置为 false。

function validateForm() {
    return validateUserName()
        && validatePassword()
        && validateEmail()
        && validateFirstName()
        && validateLastName()
    ;
}

【讨论】：

【解决方案3】：

使用这个：

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

    return false;
}

【讨论】：

【解决方案4】：

调用单个函数，例如 validate() 并从中调用您使用过的其他函数。如果所有函数都返回 true，那么只有函数 validate() 返回 true。

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

【讨论】：