Java脚本约简

Question

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

仍然是非常缺乏经验的JavaScript，所以任何帮助都是非常感谢！提前谢谢大家：

    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，以及发送给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.")
    }
    .....
    .....
    .....