javascript - 我如何在循环中使用它？

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 ;
 }
}