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

Question

我最近遇到了一种情况，我正在处理一个包含至少 60 个字段的巨大表单，我希望该表单仅在所有字段都已填写时才提交，如果没有，我想为每个未填写的字段显示自定义消息 (Sweetalert) . 例如，如果名字留空，则显示消息“请输入您的名字”，如果未选择居住国家/地区，则显示消息“请选择您的居住国家/地区”等等。当我使用 编写大量 if 和 else 语句来匹配每个字段document.getElementById()时，我想到了做事不正确的想法。我尝试在网上搜索此内容，但找不到合适的方法来做这些事情。谁能建议我一个更好的方法，而不是写 100 行的 if else 语句？

标签： javascriptif-statement

Answer 1

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

假设这是您的表格：

<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>

然后您可以使用.control该类检索所有控件并检查它们：

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;
}