javascript - 使用 JavaScript 进行表单验证。没有返回期望的结果

Question

我正在制作注册表单，但在检查所有必填字段时遇到一些问题

HTML

<form id="form">
  <div class="form-group" id="form-group">
    <label for="exampleInputEmail1">Username</label>
    <input type="text" class="form-control" id="username" placeholder="username">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Email</label>
    <input type="email" class="form-control" id="email" placeholder="email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Confirm Password</label>
    <input type="password" class="form-control" id="confirm_password" placeholder="Confirm Password">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Message</label>
    <textarea class="form-control" rows="10" id="message"></textarea>
  </div>
  <div class="checkbox">
    <label class="checkbox-inline">
      <input type="checkbox" id="checkbox1" value="option1">0
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="checkbox2" value="option1">1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="checkbox3" value="option2">2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" id="checkbox4" value="option3">3
    </label>
  </div>
  <br/>
  <p><span id="messagealert"></span>
  </p>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

JavaScript

function checkForm() {

   var formSubmit = document.getElementById("form");
   formSubmit.onsubmit = function() {
     var username = document.getElementById("username");
     var email = document.getElementById("email");
     var password = document.getElementById("password");
     var confirm_password = document.getElementById("confirm_password");
     var message = document.getElementById("message");
     var messageAlert = document.getElementById("messagealert");

     var checkbox1 = document.getElementById("checkbox1");

     if (username.value == "" && email.value == "" && password.value == "" && confirm_password.value == "" && message.value == "") {
       messageAlert.innerHTML = "Please fill out the fields";
       username.style.border = "1px solid red";
       email.style.border = "1px solid red";
       password.style.border = "1px solid red";
       confirm_password.style.border = "1px solid red";
       message.style.border = "1px solid red";
       return false;

     } else {
       return true;
     }

   };

 }

 window.onload = function() {
   checkForm();
 }

现在，当所有字段都为空时，它返回 false，但我填充其中一个字段，它返回 true。我不知道我的代码有什么问题，还请告诉我如何检查复选框

Answer 1

是的，那是因为你 if if (username.value == ""&& email.value == ""&& password.value == ""&& inform_password.value == ""&& message.value = =“”)当填充这些值之一时，这不是 true，因此您将点击 else。

尝试这样的事情:

var x = 1;
if (username.value == ""){
   x = 0;
   username.style.border = "1px solid red";
}
if (email.value == ""){
   x = 0;
   email.style.border = "1px solid red";
}
if (password.value == ""){
   x = 0;
   password.style.border = "1px solid red";
}
if (confirm_password.value == ""){
   x = 0;
   confirm_password.style.border = "1px solid red";
}
if (message.value == ""){
   x = 0;
   message.style.border = "1px solid red";
}

if (x === 1){
   return true;
} else {
   messageAlert.innerHTML = "Please fill out the fields";
   return false;
}

这可能是一个糟糕的解决方案，您可以将所有这些选择器添加到一个数组或类似的数组中，然后对它们进行查找并检查它们的值以确定它们是否已设置。但无论如何，这至少会让你前进。