在一个函数中验证多个表单字段答案

【问题标题】：Validate multiple form fields in one function在一个函数中验证多个表单字段
【发布时间】：2015-04-18 05:43:38
【问题描述】：

当您在字段中输入值时，我有以下代码用于验证 for 字段（红色表示无效，绿色表示字段有效）：

function FormValidation(){
    var fn=document.getElementById("firstName").value;
    if(fn == ""){
        document.getElementById("firstName").style.borderColor = "red";
        return false;
    }else if (/^[0-9]+$/.test(document.getElementById("firstName").value)) {
        document.getElementById("firstName").style.borderColor = "red";
        return false;
    }else if(fn.length <=2){
        document.getElementById("firstName").style.borderColor = "red";
        return false;
    }else{
        document.getElementById("firstName").style.borderColor = "#679f30";
    }
}

其他字段也需要这些验证。

我尝试了一个 for 循环，但它不能像上面的代码对一个字段那样验证所有表单：

function FormValidation(){
    var array = ["firstName", "middleName", "lastName"];
    for(i=0; i < array.length; i++){
        var fn=document.getElementById(array[i]).value;
        if(fn == ""){
            document.getElementById(array[i]).style.borderColor = "red";
            return false;
        }else if (/^[0-9]+$/.test(document.getElementById(array[i]).value)) {
            document.getElementById(array[i]).style.borderColor = "red";
            return false;
        }else if(fn.length <=2){
            document.getElementById(array[i]).style.borderColor = "red";
            return false;
        }else{
            document.getElementById(array[i]).style.borderColor = "#679f30";
        }
    }
}

所以我的问题是我做错了什么？或者有没有一种方法可以在一个函数中验证多个表单，而不必一遍又一遍地编写相同的代码。

非常感谢任何帮助！

谢谢，铝

【问题讨论】：

您在表单的哪个特定事件上调用函数FormValidation？了解这一点很重要。

标签： javascript php html forms

【解决方案1】：

将 id 作为函数的参数传递并访问受尊重的参数。因此，您可以使用您的特定参数调用该函数，而不是一次又一次地编写整个代码。 function FormValidation(id){ var fn=document.getElementById(id).value; if(fn == ""){ document.getElementById(id).style.borderColor = "red"; return false; }else if (/^[0-9]+$/.test(document.getElementById(id).value)) { document.getElementById(id).style.borderColor = "red"; return false; }else if(fn.length <=2){ document.getElementById(id).style.borderColor = "red"; return false; }else{ document.getElementById(id).style.borderColor = "#679f30"; } }

调用带有参数的函数作为您需要验证的id。例如return FormValidation("firstName")

【讨论】：

谢谢，我不敢相信我没有想到这个..SMH
@Baraa 欢迎您，但在验证名称时要小心。它很棘手.. Awsme 听到它对你有帮助。

【解决方案2】：

给他们相同的类，然后使用

getElementByClass

然后循环浏览它们

【讨论】：

我以为没有 getElementByClass 而只有 getElementByClassName ？这不会和我上面的数组有同样的效果吗？这没有按预期工作。