只运行一次？答案

【问题标题】：Run part of for only once?只运行一次？
【发布时间】：2011-08-09 15:35:45
【问题描述】：

我有一个 for 循环，它使用 class="required" 遍历每个输入，它是空的，它会改变它的背景颜色。此外，它还向部分页面添加了一条消息：“需要使用红色背景色的字段”。但是，我只希望消息显示一次。即使 5 个字段为空，也应该只显示一条消息。有什么建议么？

这是我的代码：

<script type="text/javascript" >
window.onload = function() {
document.getElementById("formID").onsubmit = function() {
    var fields = this.getElementsByClassName("validate"),
        sendForm = true;
    for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ffb8b8";

    var inst = document.getElementById('inst');
        var reason = inst.insertRow(-1);
        var cell1=reason.insertCell(0);
        cell1.innerHTML = '<p>Fields with a red background are required and empty. Please fill them in and try resubmitting. Thanks.</p>';
        inst.appendChild(reason);


    sendForm = false;
        }

    else {
            fields[i].style.backgroundColor = "#fff";
        }
} 
    if(!sendForm) {
        return false;
    }
}
}
</script>

【问题讨论】：

标签： javascript for-loop

【解决方案1】：

您可以在任何时候字段验证失败时设置一个标志为真。循环执行后，如果标志为真，则追加错误信息。

【讨论】：

【解决方案2】：

这应该很简单——你已经有了一个布尔变量来表示验证是否失败——sendForm。因此，只需将“附加消息”部分从循环中取出并放入 if 中。

document.getElementById("formID").onsubmit = function() {
    var fields = this.getElementsByClassName("validate"),
        sendForm = true;
    for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ffb8b8";

            sendForm = false;
        }

    else {
            fields[i].style.backgroundColor = "#fff";
        }
    } 
    if(!sendForm) {
         var inst = document.getElementById('inst');
        var reason = inst.insertRow(-1);
        var cell1=reason.insertCell(0);
        cell1.innerHTML = '<p>Fields with a red background are required and empty. Please fill them in and try resubmitting. Thanks.</p>';
        inst.appendChild(reason);
        return false;            
    }
}

【讨论】：

当我这样做时，它会说“未终止的字符串文字”指向 ' 之前的 <p>

【解决方案3】：

使用标志将其初始化为假，一旦你得到任何空字段使其为真并仅在标志为假时打印消息。这里

<script type="text/javascript" >
window.onload = function() {
document.getElementById("formID").onsubmit = function() {
    var fields = this.getElementsByClassName("validate"),
        sendForm = true;
    var flag=false;
    for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ffb8b8";
    if(flag==false) {
        var inst = document.getElementById('inst');
        var reason = inst.insertRow(-1);
        var cell1=reason.insertCell(0);
        cell1.innerHTML = '<p>Fields with a red background are required and empty. Please fill them in and try resubmitting. Thanks.</p>';
        inst.appendChild(reason);
    }
    flag=true;


    sendForm = false;
        }

    else {
            fields[i].style.backgroundColor = "#fff";
        }
} 
    if(!sendForm) {
        return false;
    }
}
}
</script>

【讨论】：

【解决方案4】：

添加一个布尔标志以表明您已经显示了该消息

window.onload = function() {
  var notified = false;

  for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ffb8b8";
            ...
            if (!notified) {
               cell1.innerHTML = '<p>Fields with a red background are required and empty. Please fill them in and try resubmitting. Thanks.</p>';
               inst.appendChild(reason);
               notified = true;
            }
            ....
}

【讨论】：

这给了我一个错误missing variable name 指的是var notified..