表单验证和数组，如何收缩多个 if 和 else 语句？

Question

我正在使用 JavaScript 验证注册表单。我决定添加红色文本样式来识别错误的输入。 我有两个数组：fail[] 包含每个失败输入的消息，lblcol[] 具有不同的标签 ID。

 var fail = new Array();

 fail[0] = validateNickname(form.form_nickname.value);
 fail[1] = validatePassword(form.form_password.value);
 fail[2] = validateFirstname(form.form_firstname.value);
 fail[3] = validateLastname(form.form_lastname.value);
 fail[4] = validateEmail(form.form_email.value);

var lblcol = document.querySelectorAll("#lbl0, #lbl1, #lbl2, #lbl3, #lbl4");

if (fail[0]!="")
lblcol[0].style.color="red";
else 
lblcol[0].style.color="black";
if (fail[1]!="")
lblcol[1].style.color="red";
else 
lblcol[1].style.color="black";
if (fail[2]!="")
lblcol[2].style.color="red";
else
lblcol[2].style.color="black";  
if (fail[3]!="")
lblcol[3].style.color="red";
else
lblcol[3].style.color="black";
if (fail[4]!="")
lblcol[4].style.color="red";
else 
lblcol[4].style.color="black";  

有没有更快的方法来添加这种效果？

Answer 1

您可以在一个简单的循环中执行此操作。循环将遍历数组中的每个值，然后执行此测试。我还将if-else 语句更改为ternary 语句。下面是代码的样子：

for (var i=0;i<fail.length;i++) {
    lblcol[i].style.color = fail[i]!="" ? "red" : "black";
}

此循环首先将变量i 设置为0（通过代码var i=0;），然后测试i<fail.length 是否为真，因为fail.length是 5。然后执行 forloop 的内容后，它会递增 1（通过代码 i++），并从它测试的部分重新开始 i<fail.length。

在循环中，它为索引i 的lblcol 分配颜色，并在数组fail 中索引i 处的值不等于空字符串时分配值"red" ，否则它分配值"black"。