javascript - 如何减少多个 if 语句的代码

Question

我正在尝试验证一个大型联系表单。当用户忘记必填输入字段时，我会用默认文本填充空变量。

我目前的解决方案使用九个 if声明。有没有更好的方法来使用更少的代码？

html: <xehases class="" id="xehases"></xehases>

var onoma = $("#fname").val();
var eponimo = $("#lname").val();
var email = $("#email").val();
var diefthinsi = $("#address").val();
var poli = $("#city").val();
var xora = $("#country").val();
var katigoriaDiafimisis = $("#AdCategory").val();
var plano = $("#plan").val();
var istoselida = $("#website").val();
var epixirisi = $("#company").val();
var minima = $("#message").val();

var missing = '  ';

if (onoma === "") {
  missing += 'Όνομα ';
  $("xehases#xehases").html(missing);
} else {
  $("xehases#xehases").html(missing);
}

if (eponimo === "") {
  missing += 'Επώνυμο ';
  $("xehases#xehases").html(missing);
} else {
  $("xehases#xehases").html(missing);
}

if (email === "") {
  missing += 'email ';
  $("xehases#xehases").html(missing);
} else {
  $("xehases#xehases").html(missing);
}

if (poli === "") {
  missing += 'Πόλη ';
  $("xehases#xehases").html(missing);
} else {
  $("xehases#xehases").html(missing);
}

if (xora === "please choose a category") {
  missing += 'Χώρα ';
  $("xehases#xehases").html(missing);
} else {
  $("xehases#xehases").html(missing);
}

if (plano === "") {
  missing += 'Πλάνο ';
  $("xehases#xehases").html(missing);
} else {
  $("xehases#xehases").html(missing);
}

if (katigoriaDiafimisis === "") {
  missing += 'Κατηγορία Διαφήμισης ';
  $("xehases#xehases").html(missing);
} else {
  $("xehases#xehases").html(missing);
}

if (epixirisi === "") {
  missing += 'Επιχείρηση ';
  $("xehases#xehases").html(missing);
} else {
  $("xehases#xehases").html(missing);
}

if (minima === "") {
  missing += 'Μήνυμα ';
  $("xehases#xehases").html(missing);
} else {
  $("xehases#xehases").html(missing);
}

Answer 1

您可以创建一个字典，其中包含表单字段和缺少时显示的字符串，并遍历列表。另外，正如另一个响应所指出的，将丢失的错误消息设置到最后并且只执行一次；此外，如果您要在每种情况下做同样的事情，则不需要 if/else。编写类似这样的代码:

// key is form input, value is displayed in missing field message
const fieldsDict = {
    "fname": "Όνομα",
    "lname": "eponimo",
    // ...
};

let missing = "";

Object.keys(fieldsDict).forEach((field) => {
    if ($("#" + field).val() === "") {
        missing += fieldsDict[field] + " ";
    }
});

$("xehases#xehases").html(missing);