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中的条件），要确定条件的焦点ID为true，并且发送到alert的消息。然后，对其进行迭代，找到第一个真实条件-如果找到，则alert关联消息，集中元素，然后return 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();
}

Answer 2

您可以创建一个函数，该函数将元素ID name,email...作为参数，并使用一条需要alert的消息。从该函数返回false。您的if-else语句仅返回该函数。

这是一个小例子。

function sendMsg(elm,msg){
  document.getElementById(elm).focus();
  alert(msg)
  return false;
}


if (name === "") {
        return sendMsg('name',"Name must be filled out.")
    } else if (!(/\S/.test(name))) {
        return sendMsg("name","Name cannot be blank.")
    } else if (!(/^([^0-9]*)$/.test(name))) {
        return sendMsg('name',"Name cannot contain numbers.")
    } else if (email === "") {
        return sendMsg('email',"Please enter your email address.")
    } else if (/^\S+@\S+\.\S+$/.test(email) === false) {
       return sendMsg('email',"Please enter a valid email address.")
    }
    .....
    .....
    .....

Java脚本减少

2 个答案: