Question

这是鹅卵石的脚本。它就像你留下空白的那一刻一样，它通过提交按钮指出它。但它很烦人，因为它一个接一个地指出它，而不是立即指出所有空白的字段。

我该如何解决这个问题？请把它分解成一口大小，因为这里更大的目标是理解它不仅仅是让它起作用。

document.forms[0].onsubmit= function() {
   var form = document.forms[0];
   for (var i = 0; i < form.elements.length; i++) {
       if (form.elements[i].value.length == 0) {
           console.log(form.elements[i]);
           form.elements[i].border = "1px solid red"; 
           form.elements[i].style.backgroundColor = "#FFCCCC";
           return false;
       }
   }
}

<form method="post" action="" id="myForm">
   <div id="validation"></div>
   <p><label>Name<br><input type="text" name="Name"></label></p>
   <p><label>Email<br><input type="email" name="Email" ></label></p>
   <p><input type="submit" value="Submit"></p>
</form>

Answer 1

您的return语句导致循环提前停止。如果你想要发出所有不完整的字段，请让它运行到最后。

document.forms[0].onsubmit= function(event) {
     for (var i = 0; i < this.elements.length; i++) {
         if (this.elements[i].value.length == 0) {
             event.preventDefault();
             this.elements[i].style.border = "1px solid red"; 
             this.elements[i].style.backgroundColor = "#FFCCCC";
         }
     }
 }

这是一种更现代的编写方式，使用类和更新的语法。

document.querySelector("form").addEventListener("submit", function(event) {
  for (const el of this.elements) {
    if (el.classList.toggle("incomplete", el.value.length == 0)) {
      event.preventDefault();
    }
  }
});

.incomplete {
  border: 1px solid red;
  background-color: #FFCCCC;
}

<form method="post" action="" id="myForm">
  <div id="validation"></div>
  <p><label>Name<br><input type="text" name="Name"></label></p>
  <p><label>Email<br><input type="email" name="Email" ></label></p>
  <p><input type="submit" value="Submit"></p>
</form>

Answer 2

只要表单的输入元素的长度为0，就会退出循环：

 if (form.elements[i].value.length == 0) {
    .. ..
     return false;
 }

如果至少输入符合您的要求，return false;必须位于循环之后。
您可以使用boolean变量来存储此信息。

<script>
 document.forms[0].onsubmit= function() {
     var form = document.forms[0];
     var hasError = false;
     for (var i = 0; i < form.elements.length; i++) {
         if (form.elements[i].value.length == 0) {
             console.log(form.elements[i]);
             form.elements[i].border = "1px solid red"; 
             form.elements[i].style.backgroundColor = "#FFCCCC";
             hasError = true;
         }
     }

     if (hasError){
       return false;
     }
 }
 </script>

如何指出所有错误而不是一个一个

2 个答案: