Javascript 如何使用JQuery同时验证多个字段

我创建了一个使用JQuery和JavaScript进行验证的表单。唯一的问题是，它一次验证一个字段。因此，用户必须先更正第一个字段，然后再次按submit以查看下一个字段是否有效

我想做的是，让JQuery在按下submit之后验证整个表单，并显示所有适用的错误消息

这是我的JS:

function validateUserName()
{
    var u = document.forms["NewUser"]["user"].value
    var uLength = u.length;
    var illegalChars = /\W/; // allow letters, numbers, and underscores
    if (u == null || u == "")
    {

        $("#ErrorUser").text("You Left the Username field Emptyyy");
        return false;
    }
    else if (uLength < 4 || uLength > 11)
    {
        $("#ErrorUser").text("The Username must be between 4 and 11 characters");
        return false;
    }
    else if (illegalChars.test(u))
    {
        $("#ErrorUser").text("The Username contains illegal charectors men!");
        return false;
    }
    else
    {
        return true;
    }
}

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

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

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

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

        $("#ErrorEmail").text("ILEGAL CHARECTORS DETECTED EXTERMINATE");
        return false;
    }
    else
    {
        return true;
    }
}

function validateFirstName()
{
    var f = document.forms["NewUser"]["fName"].value;
    var fLength = f.length;
    var illegalChars = /\W/;

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


}

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

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


}

function validateForm()
{
    valid = true;
    //call username function
    valid = valid && validateUserName();

    //call password function
    valid = valid && validatePassword();

    //call email function
    valid = valid && validateEmail();

    //call first name function
    valid = valid && validateFirstName();

    //call first name function
    valid = valid && validateLastName();

    return valid;
}

$('#your-form').submit(validateForm);

---

不返回

true

或

false

而是返回包含错误的字符串，如果未发现错误，则返回空字符串

然后，

validateForm

可以是

function validateForm()
{
    error = "";
    //call username function
    error += "\n"+validateUserName();

    //call password function
    error += "\n"+validatePassword();
    ...
    if(error === ""){
        return true;
    }
    $("#ErrorLname").text(error);
    return false;
}

---

您需要访问所有字段并检查字段是否有效。如果该字段有效，则跳过它，否则将该字段放入数组中。选中所有字段后，一次显示数组中的所有错误字段。

var validate；
var validate;
function validateUserName()
{
       validate = true;
        var u = document.forms["NewUser"]["user"].value
        var uLength = u.length;
        var illegalChars = /\W/; // allow letters, numbers, and underscores
        if (u == null || u == "")
        {
            $("#ErrorUser").text("You Left the Username field Emptyyy");
            validate     = false;
        }
        else if (uLength <4 || uLength > 11)
        {
            $("#ErrorUser").text("The Username must be between 4 and 11 characters");
            validate     = false;
        }
        else if (illegalChars.test(u)) 
        {
            $("#ErrorUser").text("The Username contains illegal charectors men!");
            validate     = false;
        }

}

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

    }

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

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

            $("#ErrorEmail").text("You left the email field blank!");
            validate     = false;
        } 
        else if (e.match(illegalChars)) 
        {

            $("#ErrorEmail").text("ILEGAL CHARECTORS DETECTED EXTERMINATE");
           validate     = false;
        } 

    }
    function validateFirstName()
    {
        var f = document.forms["NewUser"]["fName"].value;
        var fLength = f.length;
        var illegalChars = /\W/;

        if(fLength > 20)
        {
            $("#ErrorFname").text("First Name has a max of 20 characters");
            validate     = false;
        }
        else if (illegalChars.test(f))
        {
            $("#ErrorFname").text("Numbers,letter and underscores in first name only");
            validate     = false;
        }



    }

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

        if(lLength > 100)
        {
            $("#ErrorLname").text("Last Name has a max of 100 characters");
           validate     = false;
        }
        else if (illegalChars.test(f))
        {
            $("#ErrorLname").text("Numbers,letter and underscores in last name only");
            validate     = false;
        }

    }

function validateForm()   
{


     validateUserName();  
     validatePassword();    
     validateEmail();
     validateFirstName();
     validateLastName();

    return validate;
}

函数validateUserName（）
{
验证=真；
var u=document.forms[“NewUser”][“user”].value
var uLength=u.长度；
var illegalChars=/\W//；//允许使用字母、数字和下划线
如果（u==null | | u==“”）
{
$（“#ErrorUser”）.text（“您将用户名字段留空yyy”）；
验证=假；
}
否则，如果（U长度11）
{
$（“#ErrorUser”）.text（“用户名必须介于4到11个字符之间”）；
验证=假；
}
else if（非法字符测试（u））
{
$（“#ErrorUser”）.text（“用户名包含非法charectors man！”）；
验证=假；
}
}
函数validatePassword（）
{
var p=document.forms[“NewUser”][“pwd”].value
var cP=document.forms[“NewUser”][“confirmPwd”].value
var pLength=p.长度；
如果（p==null | | p==“”）
{
$（“#ErrorPassword1”）.text（“您将密码字段留空”）；
验证=假；
}
否则，如果（增压<6 | |增压>20）
{
$（“#ErrorPassword1”）.text（“您的密码长度必须介于6到20个字符之间”）；
验证=假；
}
否则如果（p！=cP）
{
$（“#ErrorPassword1”）.text（“第个密码不匹配！”）；
验证=假；
}
}
函数validateEmail（）
{
var e=document.forms[“NewUser”][“email”].value
变量长度=e.长度；
var emailFilter=/^[^@]+@[^@.]+\.[^@]*\w\w$/；
变量illegalChars=/[\（\）\\，\；\：\\\\“\[\]]/；
如果（元素长度==“”| |元素长度==null）
{
$（“#ErrorEmail”）.text（“您将电子邮件字段留空了！”）；
验证=假；
} 
否则如果（如匹配（非法字符））
{
$（“#ErrorEmail”）.text（“检测到的ILEGAL CHARECTORS已清除”）；
验证=假；
} 
}
函数validateFirstName（）
{
var f=document.forms[“NewUser”][“fName”].value；
var fLength=f.长度；
var illegalChars=/\W/；
如果（长度>20）
{
$（“#ErrorFname”）.text（“名字最多20个字符”）；
验证=假；
}
else if（非法字符测试（f））
{
$（“#ErrorFname”）.text（“仅限名字中的数字、字母和下划线”）；
验证=假；
}
}
函数validateLastName（）
{
var l=document.forms[“NewUser”][“lName”].value；
var l长度=l长度；
var illegalChars=/\W/；
如果（长度>100）
{
$（“#ErrorName”）.text（“姓氏最多可包含100个字符”）；
验证=假；
}
else if（非法字符测试（f））
{
$（“#ErrorName”）.text（“仅限姓氏中的数字、字母和下划线”）；
验证=假；
}
}
函数validateForm（）
{
validateUserName（）；
验证密码（）；
validateEmail（）；
validateFirstName（）；
验证ElastName（）；
返回验证；
}

您是否考虑过使用jquery validate插件

-->

使所有的if条件独立运行。您想知道省略号是什么意思吗？（或者我把其余的验证器函数放在这里？）其余的验证者根据您的表单结构进行功能。我在jsFIDDL.NET上添加了一个小提琴。如果这解决了您的问题，请考虑接受这个答案。这是一个新帐户，所以我必须等待5分钟才能接受您的答案，当时间到了时会这样做：）我现在有一个新的问题，在我纠正之后，表单不会提交。ted值？@user2396852在我的提琴示例中，我没有提交，我只是发出警报并返回false（以便它在提琴中正常工作）。在提琴中，您需要

返回true；