如何在循环中使用它？

Question

我正在为类分配作业，并且我知道必须有一种更好的编写方式。也许某种获取输入和标签的循环？我在这里重复很多，如果可能的话，将其最小化似乎更好。function checkEmptyFields() {if(formName.value === "") {            formLabels[0].classList.add("has-errors");    formLabels[0].innerHTML = "Name is required *";    formName.style.borderBottomColor = "red";} else {    formLabels[0].classList.remove("has-errors");    formLabels[0].innerHTML = "Name";    formName.style.borderBottomColor = "green";}if(formEmail.value === "") {    formLabels[1].classList.add("has-errors");    formLabels[1].innerHTML = "Email is required *";    formEmail.style.borderBottomColor = "red";} else {    formLabels[1].classList.remove("has-errors");    formLabels[1].innerHTML = "Email";    formEmail.style.borderBottomColor = "green";}if(formNumber.value === "") {    formLabels[2].classList.add("has-errors");    formLabels[2].innerHTML = "Phone is required *";    formNumber.style.borderBottomColor = "red";} else {    formLabels[2].classList.remove("has-errors");    formLabels[2].innerHTML = "Phone";    formNumber.style.borderBottomColor = "green";}if(formMessage.value === "") {    formLabels[3].classList.add("has-errors");    formLabels[3].innerHTML = "message is required *";    formMessage.style.borderBottomColor = "red";} else {    formLabels[3].classList.remove("has-errors");    formLabels[3].innerHTML = "Email";    formMessage.style.borderBottomColor = "green";}}

Answer 1

您可以这样尝试：

fields = [{

 'name': formName,

 'index': 0,

 'css-error': "has-errors",

 'innerHtml': "Name",

 'innerHtml-error': "Name is required *",

 'borderBottomColor ': "green", //Or you can hardcode it in the loop itself.

 'borderBottomColor-error': "red"

},

 ....

]

for(var i=0; i < fields.length; i++) {

 var field = fields[i];

 if(field.name.value == "") {

   formLabels[field.index].classList.add(field.css);

   formLabels[field.index].innerHTML = field.innerHtml-error;

   field.name.style.borderBottomColor = field.borderBottomColor-error ;

 } else {

   formLabels[field.index].classList.remove(field.css);

   formLabels[field.index].innerHTML = field.innerHtml;

   field.name.style.borderBottomColor = field.borderBottomColor ;

 }

}

Answer 2

您可以为控件和控件名称创建数组，并将它们与formLabels已有数组一起处理，在一个从0到长度（不包括在内）的for -loop中，如下所示：

function checkEmptyFields() {

    var controls = [formName, formEmail, formNumber, formMessage];

    var controlNames = ["Name", "Email", "Phone", "Message"];

    for (var i = 0; i < controls.length; i++) {

        if(controls[i].value === "") {        

            formLabels[i].classList.add("has-errors");

            formLabels[i].innerHTML = controlNames[i] + " is required *";

            controls[i].style.borderBottomColor = "red";

        } else {

            formLabels[i].classList.remove("has-errors");

            formLabels[i].innerHTML = controlNames[i];

            controls[i].style.borderBottomColor = "green";

        }

    }

}

Answer 3

您可以编写其他功能来检查一个字段：

    function checkEmptyField(field, ind, msg, errmsg) {

    if(field.value === "") {        

        formLabels[ind].classList.add("has-errors");

        formLabels[ind].innerHTML = errmsg;

        field.style.borderBottomColor = "red";

    } else {

        formLabels[ind].classList.remove("has-errors");

        formLabels[ind].innerHTML = msg;

        field.style.borderBottomColor = "green";

    }

    }

那你可以叫它

function checkEmptyFields() {

 checkEmptyField(formName,0,"Name","Name is required *");

...