如何在循环中使用它？

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 = [{&nbsp;'name': formName,&nbsp;'index': 0,&nbsp;'css-error': "has-errors",&nbsp;'innerHtml': "Name",&nbsp;'innerHtml-error': "Name is required *",&nbsp;'borderBottomColor ': "green", //Or you can hardcode it in the loop itself.&nbsp;'borderBottomColor-error': "red"},&nbsp;....]for(var i=0; i < fields.length; i++) {&nbsp;var field = fields[i];&nbsp;if(field.name.value == "") {&nbsp; &nbsp;formLabels[field.index].classList.add(field.css);&nbsp; &nbsp;formLabels[field.index].innerHTML = field.innerHtml-error;&nbsp; &nbsp;field.name.style.borderBottomColor = field.borderBottomColor-error ;&nbsp;} else {&nbsp; &nbsp;formLabels[field.index].classList.remove(field.css);&nbsp; &nbsp;formLabels[field.index].innerHTML = field.innerHtml;&nbsp; &nbsp;field.name.style.borderBottomColor = field.borderBottomColor ;&nbsp;}}

Answer 2

您可以为控件和控件名称创建数组，并将它们与formLabels已有数组一起处理，在一个从0到长度（不包括在内）的for -loop中，如下所示：function checkEmptyFields() {&nbsp; &nbsp; var controls = [formName, formEmail, formNumber, formMessage];&nbsp; &nbsp; var controlNames = ["Name", "Email", "Phone", "Message"];&nbsp; &nbsp; for (var i = 0; i < controls.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; if(controls[i].value === "") {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formLabels[i].classList.add("has-errors");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formLabels[i].innerHTML = controlNames[i] + " is required *";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controls[i].style.borderBottomColor = "red";&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formLabels[i].classList.remove("has-errors");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formLabels[i].innerHTML = controlNames[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controls[i].style.borderBottomColor = "green";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}

Answer 3

您可以编写其他功能来检查一个字段：&nbsp; &nbsp; function checkEmptyField(field, ind, msg, errmsg) {&nbsp; &nbsp; if(field.value === "") {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; formLabels[ind].classList.add("has-errors");&nbsp; &nbsp; &nbsp; &nbsp; formLabels[ind].innerHTML = errmsg;&nbsp; &nbsp; &nbsp; &nbsp; field.style.borderBottomColor = "red";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; formLabels[ind].classList.remove("has-errors");&nbsp; &nbsp; &nbsp; &nbsp; formLabels[ind].innerHTML = msg;&nbsp; &nbsp; &nbsp; &nbsp; field.style.borderBottomColor = "green";&nbsp; &nbsp; }&nbsp; &nbsp; }那你可以叫它function checkEmptyFields() {&nbsp;checkEmptyField(formName,0,"Name","Name is required *");...