Javascript For循环没有像预期的那样追加到Div中？

Question

我不太确定我在这里做错了什么。实际上，我检查是否有任何元素值是空的，如果它们是空的，则开始迭代它们。

一旦迭代，它就会将空元素的id附加到div中。或者至少这是我所期望的。有什么帮助吗？谢谢!

<script>

   function validate(){
       var username = document.getElementById("username");
       var name = document.getElementById("name");
       var phone = document.getElementById("phone-number");
       var email = document.getElementById("email");
       var password = document.getElementById("password");
       var passwordc = document.getElementById("password-confirmation");

       var array = [username, name, phone, email, password, passwordc];

       if(username.value == "" || name.value == "" || phone.value == "" || email.value == "" || password.value == "" || passwordc.value == ""){
           document.getElementById('required-field-error').innerHTML = "The following must not be blank: ";

           for(i = 0; i < array.length; i++);{
               if(array[i].value == ""){
               document.getElementById('required-field-error').innerHTML += " array[i].id ";
               }
               else{document.getElementById('required-field-error').innerHTML += "";}
           }

       }
       else{
           document.getElementById('required-field-error').innerHTML = "";
       }
   }


</script> 

Answer 1

您独立结束了for循环，因此您将退出债券指数。也可以作为“徐狐”的指针，也就是字串。请在下面找到更正后的脚本：

  <script>
       function validate(){
           var username = document.getElementById("username");
           var name = document.getElementById("name");
           var phone = document.getElementById("phone-number");
           var email = document.getElementById("email");
           var password = document.getElementById("password");
           var passwordc = document.getElementById("password-confirmation");

           var array = [username, name, phone, email, password, passwordc];

           if(username.value == "" || name.value == "" || phone.value == "" || email.value == "" || password.value == "" || passwordc.value == ""){
               document.getElementById('required-field-error').innerHTML = "The following must not be blank: ";

               for(i = 0; i < array.length; i++){
                   if(array[i].value == ""){
                   document.getElementById('required-field-error').innerHTML += " " + array[i].id;
                   }
                   else{document.getElementById('required-field-error').innerHTML += "";}
               }

           }
           else{
               document.getElementById('required-field-error').innerHTML = "";
           }
       }        
    </script> 

Answer 2

您可以通过这样的操作来大大简化代码：

function validate() {
  const requiredFields = ['username', 'name', 'phone-number', 'email', 'password', 'password-confirmation'];
  const missingFields = requiredFields.filter(requiredFieldStr => {
    return !document.getElementById(requiredFieldStr).value;
  });
  const requiredFieldError = document.getElementById('required-field-error');
  if (missingFields.length > 0) {
    requiredFieldError.textContent =
      "The following must not be blank: " + missingFields.join('');
  } else requiredFieldError.textContent = '';
}

Answer 3

我不太清楚你的要求。但是，如果您使用JQuery验证，这将简化您的事情。