如何在循環中使用它？

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 *");
...

Answer 4

如果您了解並了解for循環，則可以簡單地遍歷2個數據數組，如下所示：

function checkEmptyFields() {

    formArray = [formName, formEmail, formNumber, formMessage];
    labelArray = ["Name", "Email", "Phone", "Message"];

    for (let i = 0; i < formArray.length; i++) {
        if(formArray[i].value === "") {        
            formLabels[i].classList.add("has-errors");
            formLabels[i].innerHTML = labelArray[i] + " is required *";
            formArray[i].style.borderBottomColor = "red";
        } else {
            formLabels[i].classList.remove("has-errors");
            formLabels[i].innerHTML = labelArray[i];
            formArray[i].style.borderBottomColor = "green";
        }
    }
}

如果沒有，那么您可以在這里閱讀有關它們的信息：

https://www.w3schools.com/js/js_loop_for.asp

Answer 5

只要您在一個以上的地方擁有大致相同的代碼，就應該像在此處一樣停下來並重新思考您的方法。

如果為每個需要驗證的HTML元素提供一個通用類，則可以創建一個包含它們的節點列表（集合/數組）。 然后，您可以遍歷該集合，並對每個項目執行相同的測試（僅編寫一次），並采取相應的措施。

另外，我不太確定您使用.innerHTML做什么，但是當您使用的文本中沒有任何HTML時，請不要使用它。 .innerHTML具有安全性和性能影響。 而是在沒有HTML時使用.textContent 。

 // Get all the form fields that need validation into an Array let fields = Array.prototype.slice.call(document.querySelectorAll(".validationNeeded")); // Set up form submit event handler document.querySelector("form").addEventListener("submit", checkEmptyFields); function checkEmptyFields(event) { let validCount = fields.length; // Holds the number of valid fields // Loop over the array fields.forEach(function(field){ if(field.value === ""){ field.previousElementSibling.classList.add("has-errors-label"); // style the label field.classList.add("has-errors-field"); // style the field field.classList.remove("valid-field"); // style the field validCount--; // Decrease the count of valid fields } else { field.previousElementSibling.classList.remove("has-errors-label"); // style the label field.classList.remove("has-errors-field"); // style the field field.classList.add("valid-field"); // style the field } }); // Check to see if the form should be submitted if(validCount !== fields.length){ event.preventDefault(); // Cancel the form's submission } } 

 .row {margin-bottom:5px; } .has-errors-label { color:red; } .has-errors-field { outline:1px solid red; } .valid-field { outline:1px solid green; } 

 <form action="#" method="get"> <div class="row"> <label for="userName">Name: </label> <input class="validationNeeded" name="userName" id="userName"> </div> <div class="row"> <label for="email">Email: </label> <input class="validationNeeded" name="email" id="email"> </div> <div class="row"> <label for="phone">Phone: </label> <input class="validationNeeded" name="phone" id="phone"> </div> <button>Submit</button> </form>