如何在Javascript中缩短多个if-else语句

我最近遇到一个情况，我正在处理一个包含至少60个字段的巨大表单，我希望该表单仅在所有字段都已填写时提交，如果未填写，我希望为每个未填写的字段显示一条自定义消息（Sweetalert）。 例如，如果名字为空，则显示消息“请输入您的名字”，如果未选择居住国，则向他们显示消息“请选择您的居住国”，依此类推。

---

当我使用

document.getElementById（）

编写大量if和else语句来匹配每个字段时，我突然想到了做错事的想法。我试着在网上搜索，但找不到合适的方法来做这些事情。有谁能给我推荐一种比编写100行if-else语句更好的方法吗？

通过向表单控件添加特定类，您可以检索它们并遍历它们，以检查哪些未填充

假设这是您的表单：

<form id="myForm" name="myForm" novalidate>
  <div>
    <label for="control_1">Label_1:</label>
    <input type="text" id="control_1" name="control_1" class="control" />
  </div>
  <div>
    <label for="control_2">Label_2:</label>
    <input type="text" id="control_2" name="control_2" class="control" />
  </div>
  <div>
    <label for="control_3">Label_3:</label>
    <input type="text" id="control_3" name="control_3" class="control" />
  </div>
  <div>
    <label for="control_4">Label_4:</label>
    <select id="control_4" name="control_4" class="control">
      <option value="option_1">Option 1</option>
      <option value="option_2">Option 2</option>
      <option value="option_3">Option 3</option>
    </select>
  </div>
  <div>
    <input type="submit" value="Submit!" />
  </div>
</form>

---

请阅读，嗯，如果陈述不是这类工作的合适工具。至少，不是靠他们自己。对于检查字段是否已填充这样简单的操作，可以使用内置的required属性，也可以使用循环。如果每个字段不仅仅需要使用字段的标签或名称，还需要自定义消息，您可以将该文本添加为元素的数据属性，也可以将该文本添加为元素，并将其作为子节点显示。也许可以尝试将

required

添加到所有表单字段？@tehbeardone，它不会显示每个字段所需的自定义消息右/？required属性工作得很好

function onSubmit(e) {
  e.preventDefault();
  
  const controls = document
    .getElementById("myForm")
    .querySelectorAll(".control");

  controls.forEach(control => {
    if (!isControlFilled(control)) {
      console.log(control.id);
      // Do whatever you want with control's id
    }
  });
}

// This is just for illustrative purposes
// Should be adapted to cover all control types
function isControlFilled(control) {
  return control.value ? true : false;
}