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 (username.value == "" && email.value == "" && password.value == "" && confirm_password.value == "" && message.value == "") 当其中一个值被填充时，这是不正确的，因此你会击中其他值。

尝试这样的事情：

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;
}

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

使用JavaScript进行表单验证。没有返回所需的结果

1 个答案: