javascript - JavaScript 减少

Question

我想知道是否有办法在不使用 jQuery 的情况下简化下面的代码？

对 JavaScript 仍然非常缺乏经验，因此非常感谢任何帮助!提前谢谢大家:D

    if (name === "") {
        document.getElementById("name").focus();
        alert("Name must be filled out.");
        return false;
    } else if (!(/\S/.test(name))) {
        document.getElementById("name").focus();
        alert("Name cannot be blank.");
        return false;
    } else if (!(/^([^0-9]*)$/.test(name))) {
        document.getElementById("name").focus();
        alert("Name cannot contain numbers.");
        return false;
    } else if (email === "") {
        document.getElementById("email").focus();
        alert("Please enter your email address.");
        return false;
    } else if (/^\S+@\S+\.\S+$/.test(email) === false) {
        document.getElementById("email").focus();
        alert("Please enter a valid email address.");
        return false;
    } else if (basecamp === "") {
        document.getElementById("basecamp").focus();
        alert("Please select a base camp.");
        return false;
    } else if (max == 0) {
        document.getElementById("basecamp").focus();
        alert("This base camp has run out of slots, please select another base camp.");
        return false;
    } else if (package === "") {
        document.getElementById("package").focus();
        alert("Please select a package.");
        return false;
    } else if (validdate === "") {
        document.getElementById("date").focus();
        alert("Please select a date.");
        return false;
    } else if (groupsize === "") {
        document.getElementById("groupsize").focus();
        alert("Please select a group size.");
        return false;
    } else if (groupsize <= 0) {
        document.getElementById("groupsize").focus();
        alert("Please select a postitve number.");
        return false;
    } else {
        updateData();
    }
}

Answer 1

您可以使用条件数组，其中每个子数组(或子对象)包含要测试的条件(当前 if/else if 中的内容)，条件为 true 时要关注的 ID，以及警报 的消息。然后，对其进行迭代，找到第一个真实条件 - 如果找到，则提醒关联的消息，聚焦该元素，然后返回 false。否则，如果没有发现任何不良情况，请调用updateData:

const arr = [
  [
    name === "",
    'name',
    "Name must be filled out."
  ],
  [
    !(/\S/.test(name)),
    'name',
    'Name cannot be blank.'
  ],
  [
    !(/^([^0-9]*)$/.test(name)),
    'name',
    'Name cannot contain numbers.'
  ]
  // etc
];

const firstBadCondition = arr.find(([cond]) => cond);
if (firstBadCondition) {
  const [, idToFocus, errorMessage] = firstBadCondition;
  document.getElementById(idToFocus).focus();
  alert(errorMessage);
  return false;
} else {
  updateData();
}