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小提琴：

http://jsfiddle.net/vK9aJ/

（请忽略表单中的错误大小）

Answer 1

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

根据您的功能回报，您可以选择是否提交表格。

Answer 2

您还可以通过以下方式优化之前的答案：

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

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

Answer 3

使用此：

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

    return false;
}

Answer 4

调用单个函数，例如validate（），并从中调用您使用的其他函数。如果所有函数都返回true，则只有函数validate（）返回true。

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

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

4 个答案: