javascript - 表单验证：当所有输入字段为空时不显示消息

Question

所以我正在练习 Javascript，现在我正在尝试实现表单验证。我遇到的一个问题是，当我在所有输入字段为空时单击按钮时，第一个（全名）仅突出显示并显示一条消息（请签出代码段）。我想知道它是如何工作的 - 一次只能显示一条消息，还是有办法让所有输入字段更改颜色并为每个空字段显示消息？

function validateForm(e) {
  const eName = document.getElementById("FullName");
  const eMail = document.getElementById("Email");
  const ePhone = document.getElementById("PhoneNumber");
  const ePass = document.getElementById("Password");
  const eCnfmPass = document.getElementById("ConfirmPassword");
  const phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  const fullNameText = "Oops, please fill out your name";
  const emailText = "Please enter a valid email";
  const phoneText = "Please enter a valid phone number";
  const passText = "Please enter a valid password";
  const confirmText = "Please confirm your password";

  //Name input validation - If input is left empty
  if (eName.value === "") {
    e.preventDefault();
    document.getElementById("FullName").style.borderColor = "red";
    document.getElementById("FullNameLabel").innerHTML = fullNameText;
    document.getElementById("FullNameLabel").style.color = "red";
    return false;
  }
  //Email input validation - If input is left empty
  if (eMail.value === "") {
    e.preventDefault();
    document.getElementById("Email").style.borderColor = "red";
    document.getElementById("EmailLabel").innerHTML = emailText;
    document.getElementById("EmailLabel").style.color = "red";
    return false;
  }
  //Phone number input validation - If input is left empty
  if (ePhone.value === "") {
    e.preventDefault();
    document.getElementById("PhoneNumber").style.borderColor = "red";
    document.getElementById("PhoneNumberLabel").innerHTML = phoneText;
    document.getElementById("PhoneNumberLabel").style.color = "red";
    return false;
  }

  //Phone number input validation - checks to see if there is a missing number or character that is not a number
  if (ePhone.value.match(phoneno)) {
    return true;
  } else {
    alert("Please check your phone number and enter it again")
    // document.getElementById("PhoneNumber").style.borderColor = "red";
    // document.getElementById("PhoneNumberLabel").innerHTML = phoneText;
    // document.getElementById("PhoneNumberLabel").style.color = "red";
    return false;
  }

  //Password input validation - If input is left empty
  if (ePass.value === "") {
    e.preventDefault();
    document.getElementById("Password").style.borderColor = "red";
    document.getElementById("PasswordLabel").innerHTML = passText;
    document.getElementById("PasswordLabel").style.color = "red";
    return false;
  }
  //Confirm password input validation -  If input is left empty
  if (eCnfmPass.value === "") {
    e.preventDefault();
    document.getElementById("ConfirmPassword").style.borderColor = "red";
    document.getElementById("ConfirmPswdLabel").innerHTML = confirmText;
    document.getElementById("ConfirmPswdLabel").style.color = "red";
  }
}


//Checks to make sure that both password and confirm passwords match
var passConfirm = function() {
  if (document.getElementById("Password").value ==
    document.getElementById("ConfirmPassword").value) {
    document.getElementById("Message").style.color = "green";
    document.getElementById("Message").style.fontWeight = "Heavy";
    document.getElementById("Message").innerHTML = "Passwords match!"
  } else {
    document.getElementById("Message").style.color = "red";
    document.getElementById("Message").style.fontWeight = "Heavy";
    document.getElementById("Message").innerHTML = "Passwords do NOT match!"
  }
}

<div class="container">
  <form class="form" onsubmit="validateForm(event)">
    <div>
      <label id="FullNameLabel">Full Name</label></br>
      <input type="text" placeholder="John Doe" id="FullName" />
    </div>
    <div>
      <label id="EmailLabel">Email</label></br>
      <input type="text" placeholder="[e-mail]" id="Email" />
    </div>
    <div>
      <label id="PhoneNumberLabel">Phone Number</label></br>
      <input type="text" placeholder="[phone]" id="PhoneNumber" />
    </div>
    <div>
      <label id="PasswordLabel">Password</label></br>
      <input name="Password" id="Password" type="Password" placeholder="Password" onkeyup='passConfirm();' />
    </div>
    <div>
      <label id="ConfirmPswdLabel">Confirm Password</label></br>
      <input name="ConfirmPassword" id="ConfirmPassword" type="Password" placeholder="Confirm Password" onkeyup='passConfirm();' />
    </div>
    <span id="Message"></span>
    <button type="submit" value="submit">Sign Me Up!</button>
  </form>
</div>

标签： javascriptforms

Answer 1

你有太多的javascript代码，你可以简化很多。

要检查是否有任何输入为空，您可以首先将所有输入存储在一个变量中，如下所示：

let inputs = document.querySelectorAll('.form input') //This will make a Nodelist array of all the inputs inside the form.
let labels = document.querySelectorAll('.form label') //This will make a Nodelist array of the label tags inside the form

之后，您可以遍历输入数组以查找是否有任何输入为空：

for (let i = 0; i < inputs.length; i++) {
    if (inputs.value.length == 0) {
        inputs[i].style.borderColor = 'red'
        label[i].textContent = 'Please fill in this input'
    }
}