这个Javascript代码如何更好地处理if/ use语句，或者可能使用开关？

Question

首先，如果这是违反规则，或皱眉，我非常抱歉，可以随意否决/结束。我被困死了。

我编写的HTML页面出现了问题，该页面应该由具有特定需求的输入组成，添加div以显示错误消息，并自动更新这些错误消息。作业是为了测试我们的javascript技能，因此必须通过javascript完全验证。

以下是一些指南..。

验证该表单用于四种不同的内容：

• 所需字段的存在
• 相等的密码字段
• 符合密码策略(一个大写，一个数字，长度> 7)
• 电子邮件地址的有效性

当其中任何一个被违反时，我应该关闭表单的submit按钮，这样它是不可点击的，并将一个子"div“添加到包含描述情况的错误消息的错误显示中。

这段代码在我看来是正确的，而且是自发的，但我相信，由于每次只查看一行javascript，所以它没有正确地显示错误消息，甚至无法到达代码的某些部分。

这里是我的大量javascript代码，我主要是在寻找一种方法来打破我的代码似乎卡在其中的if/ Here块：

​

function formValidation() {

  var form = document.getElementById('project-form');
  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 passwordConfirmation = document.getElementById('password-confirmation');
  var submit = document.getElementById('submit-btn');
  var errorDisplay = document.getElementById('error-display');
  var missingFieldBoolean = false;
  var passwordMismatchBoolean = false;
  var isUpper = false;
  var isNumber = false;
  var passwordLength = false;
  var validEmail = false;
  var createDiv = document.createElement("DIV");
  var passwordConstraint, passwordConstraintError;
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  //Checks all fields for empty values and updates error div

  if (username.value.length == 0 || name.value.length == 0 || email.value.length == 0 || password.value.length == 0 || passwordConfirmation.value.length == 0) {

    missingField = errorDisplay.appendChild(createDiv);

    missingField.setAttribute("id", "required-field-error");

    missingFieldError = document.getElementById('required-field-error');

    missingFieldError.innerHTML = "Missing Fields: ";

    if (username.value.length == 0) {
      missingFieldError.innerHTML += "Username - ";
    }
    if (name.value.length == 0) {
      missingFieldError.innerHTML += "Full Name - ";
    }
    if (email.value.length == 0) {
      missingFieldError.innerHTML += "Email - ";
    }
    if (password.value.length == 0) {
      missingFieldError.innerHTML += "Password - ";
    }
    if (passwordConfirmation.value.length == 0) {
      missingFieldError.innerHTML += "Password Confirmation - ";
    }
  } else {
    errorDisplay.removeChild(missingFieldError);
    missingFieldBoolean = true;
  }

  //Checks password vs password confirmation to see if they match, else updates error div

  if (password.value != passwordConfirmation.value) {
    passwordMismatch = errorDisplay.appendChild(createDiv);

    passwordMismatch.setAttribute("id", "password-mismatch-error");

    passwordMismatchError = document.getElementById('password-mismatch-error');

    passwordMismatchError.innerHTML = "The Password and Password Confirmation do not match. Please re-enter.";
  } else {
    errorDisplay.removeChild(passwordMismatchError);
    passwordMismatchBoolean = true;
  }

  //for loop to iterate through password to check for required characters, else updates error div

  for (var index = 0; index < password.value.length; index++) {
    if (password.value.charAt(index) == password.value.charAt(index).toUpperCase) {
      isUpper = true;
    }
    if ("0123456789".indexOf(password.value.charAt(index)) > -1) {
      isNumber = true;
    }
    if (password.value.length > 7) {
      passwordLength = true;
    } else {
      passwordConstraint = errorDisplay.appendChild(createDiv);

      passwordConstraint.setAttribute("id", "password-constraint-error");

      passwordConstraintError = document.getElementById('password-constraint-error');

      passwordConstraintError.innerHTML = "The Password must be 8 characters long, with one uppercase letter and one number. ";
    }
  }

  //checks if password constraints are met and removes div if true

  if (isUpper && isNumber && passwordLength) {
    errorDisplay.removeChild(passwordConstraintError);
  }

  //checks email, if invalid it adds error div, else it removes the div   ***NOT WORKING***

  if (!(mailformat.test(email.value))) {
    invalidEmail = errorDisplay.appendChild(createDiv);

    invalidEmail.setAttribute("id", "invalid-email-error");

    invalidEmailError = document.getElementById('invalid-email-error');

    invalidEmailError.innerHTML = "Please enter a valid email address.";
  } else {
    errorDisplay.removeChild(invalidEmailError);
    validEmail = true;
  }

  //if all requirements are met and true, submit button becomes enabled  ***NOT WORKING***

  if (isUpper && isNumber && passwordLength && missingFieldBoolean && passwordMismatchBoolean && validEmail) {

    submit.disabled = false;
  }
}

<div id="error-display"></div>

<br>
<form id="project-form" action="/submit.php" method="get" onclick="formValidation()">

  <label>Username:</label>

  <input id="username" type="text" onblur="formValidation()" required>
  <c>*</c>

  <br>
  <label>Full Name:</label>

  <input id="name" type="text" onblur="formValidation()" required>
  <c>*</c>

  <br>
  <label>Phone Number:</label>

  <input id="phone-number" type="tel">

  <br>
  <label>Email:</label>

  <input id="email" type="email" onblur="formValidation()" required>
  <c>*</c>

  <br>
  <label>Password:</label>

  <input id="password" type="password" required onblur="formValidation()">
  <c>*</c>

  <br>
  <label>Confirm Password:</label>

  <input id="password-confirmation" type="password" required onblur="formValidation()">
  <c>*</c>
  <br>
  <br>
  <input id="submit-btn" type="submit" value="Submit" disabled>
</form>

​

提前谢谢，如果我违反了规则，再次表示歉意。

Answer 1

我会将所有的输入放到一个对象中，这样您就可以自动地迭代对象。

const fieldValues = [
  'username',
  'name',
  'phone-number',
  'email',
  'password',
  'password-confirmation',
]
.reduce((fieldsSoFar, fieldName) => {
  fieldsSoFar[fieldName] = document.getElementById(fieldName).value;
  return fieldsSoFar;
}, {});

const missingFieldsStr =
  Object.entries(fieldValues)
  .filter(([, fieldValue]) => fieldValue.length === 0)
  .map(([fieldName]) => {
    const words = fieldName.split(' ');
    const upperWords = words.map(word => word.slice(0, 1).toUpperCase() + word.slice(1))
    return upperWords;
  })
  .join(', ');
if (missingFieldsStr) {
  // display it
}

// skipping some lines...

const hasUpper = /[A-Z]/.test(fieldValues.password);
const hasNumber = /[0-9]/.test(fieldValues.password);

诸若此类。

不要隐式地创建全局变量--强烈考虑使用linter。

只有在有意使用或插入innerHTML标记(这可能存在安全性和编码问题)时才使用HTML。在设置或检索文本值时，请改用textContent。