Javascript 验证错误后突出显示文本框

从这个问题中获取信息

我有10个条目，isNaN函数将对其进行验证，如果出现验证错误，文本框应突出显示。我的问题是:

是否有容易突出显示错误文本框的代码？还是我必须为所有10个项目写代码？下面的JS代码是isNaN函数，到目前为止，numCoke项将突出显示

if (
    isNaN(document.drinkList.numFruit.value)
    || isNaN(document.drinkList.numWater.value)
    || isNaN(document.drinkList.numCoffee.value)
    || isNaN(document.drinkList.numCoke.value)
    || isNaN(document.drinkList.numTea.value)
    || isNaN(document.drinkList.numIce.value)
    || isNaN(document.drinkList.numCream.value)
    || isNaN(document.drinkList.numSugar.value)
    || isNaN(document.drinkList.numPinn.value)
    || isNaN(document.drinkList.numLemon.value)
) {
    window.alert("You must enter a numeric value!");
    document.drinkList.numCoke.style.borderColor = "red";
    document.drinkList.numCoke.style.backgroundColor = "red";

    return false;
}

HTML代码，仅显示前5个项目，其余项目相同

<p>
    <input type="text" name="numFruit" size="3" value="0" /> Fruit Drink: A delicious mixture of various fruit juices. ($5.00)
    <br />

    <input type="text" name="numWater" size="3" value="0" /> Water: Crystal clear spring water. ($1.00)
    <br />

    <input type="text" name="numCoffee" size="3" value="0" /> Coffee: Freshly made coffee. ($4.00)
    <br />

    <input type="text" name="numCoke" size="3" value="0" /> Coke: Classic Coca-Cola. ($3.00)
    <br />

    <input type="text" name="numTea" size="3" value="0" /> Tea: Freshly made tea. ($2.00)
    <br />
</p>

水果饮料：各种果汁的美味混合物。($5.00)


水：清澈的泉水。($1.00)


咖啡：新煮的咖啡。($4.00)


可口可乐：经典可口可乐。($3.00)


茶：新沏的茶。($2.00)

通过将

类型

属性从文本更改为数字，这将突出显示

输入

元素为红色。您的代码中的exmaple将是

<input type="number" name="numFruit" size="3" value="0" /> Fruit Drink: A delicious mixture of various fruit juices. ($5.00)

水果饮料：各种果汁的美味混合物。($5.00)

这就是你想要的

$（文档）.ready（函数（）{
$（“#表单测试”）。提交（函数（e）{
var错误=错误；
if（$（'input[name=field1]'）.val（）=0{
document.getElementsByName（“field1”）[0].style.backgroundColor=“红色”；
document.getElementsByName（“字段1”）[0].style.borderColor=“红色”；
错误=真；
}否则{
document.getElementsByName（“field1”）[0].style.backgroundColor=“白色”；
document.getElementsByName（“字段1”）[0].style.borderColor=“白色”；
错误=错误；
}
if（$（'input[name=field2]'）.val（）=0{
document.getElementsByName（“field2”）[0].style.backgroundColor=“红色”；
document.getElementsByName（“字段2”）[0].style.borderColor=“红色”；
错误=真；
}否则{
document.getElementsByName（“field2”）[0].style.backgroundColor=“白色”；
document.getElementsByName（“field2”）[0].style.borderColor=“白色”；
错误=错误；
}
if（$（'input[name=field3]'）.val（）=0{
document.getElementsByName（“field3”）[0].style.backgroundColor=“红色”；
document.getElementsByName（“field3”）[0].style.borderColor=“红色”；
错误=真；
}否则{
document.getElementsByName（“field3”）[0].style.backgroundColor=“白色”；
document.getElementsByName（“field3”）[0].style.borderColor=“白色”；
错误=错误；
}
if（$（'input[name=field4]'）.val（）=0{
document.getElementsByName（“field4”）[0].style.backgroundColor=“红色”；
document.getElementsByName（“field4”）[0].style.borderColor=“红色”；
错误=真；
}否则{
document.getElementsByName（“field4”）[0].style.backgroundColor=“白色”；
document.getElementsByName（“field4”）[0].style.borderColor=“白色”；
错误=错误；
}
if（$（'input[name=field5]'）.val（）=0{
document.getElementsByName（“field5”）[0].style.backgroundColor=“红色”；
document.getElementsByName（“field5”）[0].style.borderColor=“红色”；
错误=真；
}否则{
document.getElementsByName（“field5”）[0].style.backgroundColor=“白色”；
document.getElementsByName（“field5”）[0].style.borderColor=“白色”；
错误=错误；
}
if（$（'input[name=fieldn]'）.val（）=0{
document.getElementsByName（“fieldn”）[0].style.backgroundColor=“红色”；
document.getElementsByName（“fieldn”）[0].style.borderColor=“红色”；
错误=真；
}否则{
document.getElementsByName（“fieldn”）[0].style.backgroundColor=“白色”；
document.getElementsByName（“fieldn”）[0].style.borderColor=“白色”；
错误=错误；
}
if（error）{e.preventDefault（）；alert（'您必须输入一个数值！'）；}
});
});

例子
举个例子
字段1：
字段2：
字段3：
字段4：
字段5：
字段n：
验证
根据您需要的浏览器支持，您可以使用一个属性来验证输入区域，并为与模式不匹配的字段使用特殊选择器。这可能会有所帮助！我很欣赏人造丝Dabre，但是我只应该使用JS和HTML，有什么见解吗？请不要把这么多的
if（| |）
或
条件放在相同的
if
中，而且缩进得如此严重。保持你的代码简单我觉得它很混乱。有什么建议吗？我应该更清楚，输入类型也需要保持文本。好的，但是之前你说你只需要整数。使用文本允许在输入框中插入其他字符