Javascript 是否可以选择多个文本框来输出同一个警报，而不是一次选择一个？

因此，这不是一个真正的问题，而是一个是否可以缩短一些代码的问题

我目前的代码可以工作，虽然我觉得它太长了，可能可以用更好的方式完成。基本上，我想知道是否有一种方法可以选择多个元素来输出相同的警报，而不是为每个元素创建一个新的if，下面是代码：

function newAdd() {
  if (document.getElementById("box1").value == "") {
    alert('Please define an Object!')
    return false;
  }
  if (document.getElementById("box2").value == "") {
    alert('Please define an Object!')
    return false;
  }
  if (document.getElementById("box3").value == "") {
    alert('Please define an Object!')
    return false;
  }
  if (document.getElementById("box4").value == "") {
    alert('Please define a Time!')
    return false;
  }
  if (document.getElementById("box5").value == "") {
    alert('Please define a Time!')
    return false;
  }
  if (document.getElementById("box6").value == "") {
    alert('Please define a Time!')
    return false;
  }
  if (document.getElementById("box7").value == "") {
    alert('Please define a Name!')
    return false;
  }
  if (document.getElementById("box4").value.length == 1) {
    alert('Please define a valid Time!')
    return false;
  }
  if (document.getElementById("box5").value.length == 1) {
    alert('Please define a valid Time!')
    return false;
  }
  if (document.getElementById("box6").value.length == 1) {
    alert('Please define a valid Time!')
    return false;
  }
  if (document.getElementById("box6").value.length == 2) {
    alert('Please define a valid Time! If last digit is unknown type 0.')
    return false;
  }

我尝试了box1、box2、box3，但都不起作用，而getElementsByClassName则不起作用，因为我不想选择所有文本框所在的整个类

如果你注意到上面我试图一次选择3个文本框，只有最后一个是例外

前三个、后三个和最后一个警报都是相同的

---

如果没有更简洁的方法，我想我会接受它，但似乎总有更好的方法。创建一个id名称数组，用一个函数循环

var id=[1,2,3]； ids.forEachelem=>{ 如果document.getElementByIdelem.getAttributevalue=={ 警报“值为空”； } } 一 二 三

---

我有可能把你的问题强占一点，但这是事实

可以为多个不同的字段输出相同的警报，但我认为这不是您真正想要的。如果为每个字段输出相同的警报，用户将不知道其中哪些字段有错误。他们不会喜欢的

也可以将代码缩短一点，但我认为减少行数也不是您真正想要的。我认为您真正想要的是使您的意图明确并避免不必要的重复的代码

我写的解决方案实际上比你的略长，乍一看更难理解，但我认为它在揭示这个任务所做工作的基本结构方面做得更好。一旦您了解了模式，就更容易了解如何在不引入bug的情况下更改或扩展它。对于每个输入可以不同地执行的任何操作都会为每个输入编写一次，而对于所有输入都需要相同处理的任何操作都只编写一次

您提交的代码是用ES2015编写的，但我已经用ES2016的Javascript方言编写了我的响应，因为我更习惯于编写它，它允许更清晰的语法。如果出于任何原因，您不能或不想使用ES2016，我也在下面发布了一个ES2015版本

结构如下：

我们定义了一些测试程序，这些测试程序是在字符串上运行的函数，并尝试检测验证问题空、无效等。。如果它们检测到构建用于检测的问题，则返回true，否则返回false。 我们定义了一个函数，将测试人员转换为验证器。验证器接受相同的输入，但如果检测到问题，它将返回投诉字符串，否则未定义。要调用将测试仪转换为验证器的函数，调用方需要提供测试仪和投诉字符串，以便在验证失败时使用。 我们定义一个对象，将元素ID映射到应用于这些元素的验证程序数组。步骤2中的模式允许我们在每个输入上重用空字符串验证器，即使不同的输入如果是空的，会有不同的抱怨。 我们在对象中循环ID。对于每个ID，我们得到相应输入的值。我们得到ID的验证器列表，并在值上运行每个验证器。如果其中任何一个返回投诉字符串，我们将使用该投诉字符串更改用户并返回。否则，我们将继续，直到循环结束。 ES2016：

function newAdd() {
  const nonEmptyTester = value => value === "";
  const validTimeTester = value => value.length === 1;
  const validDifferentTimeTester = value => value.length === 2;

  const makeValidator = (tester, failureMessage) => value => tester(value) ? failureMessage : undefined;

  const toValidate = {
    box1: [makeValidator(nonEmptyTester, "Please define an Object!")],
    box2: [makeValidator(nonEmptyTester, "Please define an Object!")],
    box3: [makeValidator(nonEmptyTester, "Please define an Object!")],
    box4: [
      makeValidator(nonEmptyTester, "Please define a Time!"),
      makeValidator(validTimeTester, "Please define a valid Time!")
    ],
    box5: [
      makeValidator(nonEmptyTester, "Please define a Time!"),
      makeValidator(validTimeTester, "Please define a valid Time!")
    ],
    box6: [
        makeValidator(nonEmptyTester, "Please define a Time!"),
        makeValidator(validTimeTester, "Please define a valid Time!"),
        makeValidator(validDifferentTimeTester, "Please define a valid Time! If last digit is unknown type 0.")
    ],
    box7: [validator(nonEmptyTester, "Please define a Name!")]
  };

  for (let id in toValidate) {
    const element = document.getElementById(id);
    const value = element.value;
    const problems = toValidate[id].map(validator => validator(value));
    const firstProblemIfAny = problems.find(problem => problem !== undefined);

    if (firstProblemIfAny !== undefined) {
      alert(firstProblemIfAny);
      return false;
    }
  }

  return true;
}

ES2015：

function newAdd() {
  function nonEmptyTester(value) {
    return value === "";
  };

  function validTimeTester(value) {
    return value.length === 1;
  };

  function validDifferentTimeTester(value) {
    return value.length === 2;
  };

  function makeValidator(tester, failureMessage) {
    return function (value) {
      return tester(value) ? failureMessage : undefined;
    };
  };

  var toValidate = {
    box1: [makeValidator(nonEmptyTester, "Please define an Object!")],
    box2: [makeValidator(nonEmptyTester, "Please define an Object!")],
    box3: [makeValidator(nonEmptyTester, "Please define an Object!")],
    box4: [makeValidator(nonEmptyTester, "Please define a Time!"), makeValidator(validTimeTester, "Please define a valid Time!")],
    box5: [makeValidator(nonEmptyTester, "Please define a Time!"), makeValidator(validTimeTester, "Please define a valid Time!")],
    box6: [makeValidator(nonEmptyTester, "Please define a Time!"), makeValidator(validTimeTester, "Please define a valid Time!"), makeValidator(validDifferentTimeTester, "Please define a valid Time! If last digit is unknown type 0.")],
    box7: [validator(nonEmptyTester, "Please define a Name!")]
  };

  for (var id in toValidate) {
    var element = document.getElementById(id);
    var value = element.value;
    var problems = toValidate[id].map(function (validator) {
      return validator(value);
    });
    var firstProblemIfAny = problems.find(function (problem) {
      return problem !== undefined;
    });

    if (firstProblemIfAny !== undefined) {
      alert(firstProblemIfAny);
      return false;
    }
  }

  return true;
}

我希望您会同意，尽管这是更多的代码，但更具可读性。该对象准确地显示了您正在用更少的粗制滥造进行的表单验证，并且可以立即清楚地看出要在何处更改某些行为。例如：

测试人员处理特定类型输入可接受的确切逻辑。 validator对象准确地处理哪些测试人员应用于哪个元素，以及如果这些元素的需求没有得到满足，它们会如何抱怨。 末尾的循环定义了在发现投诉时应采取的措施。例如，您可能希望将投诉打印到屏幕上的某个元素，而不是调用警报。现在，这只需要在一个地方进行更改！ 最后，如果确定要跨元素重用投诉字符串，可以执行以下操作：

var objectValidator = makeValidator(nonEmptyTester, "Please fill in all fields!");

var toValidate = {
  id1: [objectValidator],
  id2: [objectValidator],
  ...
};

---

您可以使用getElementsByClassName获取一个元素数组，并指定一个相同的类，然后循环所有实现您的逻辑的元素。@FedeSc和getElementsByClassName不起作用，因为我不想选择所有文本框所在的整个类。我一次只能选择3个框