javascript - 如何使用 JavaScript 使用相同的函数对多个输入字段进行数据验证？

Question

我有一个用户可以用来输入 5 个数字的表单。我为所有五个输入框指定了相同的 ID 和不同的名称。我想对每个输入框进行验证。我希望能够根据输入框输入的数字更改输入框的背景颜色。例如，每个数字在 0-5 范围内的输入框应将其背景颜色更改为红色，而数字在 6-10 之间的输入框应将其背景颜色更改为绿色。

我已经能够编写一段代码，使一个输入框的颜色发生变化，但是我想不出一种方法来优化我的代码并避免编写相同的代码五次。这是我到目前为止所得到的:

表格:

<form id="numbers">
    Number1: <input  id ="color" name="num1" type="number"  onchange="check();">
    <br><br>
    Number2: <input   id ="color" name="num2" type="number" onchange="check();">
    <br><br>
    Number3: <input   id ="color" name="num3" type="number" onchange="check();">
    <br><br>
</form>

功能:

function check() {
    var inputVal = document.getElementById("color").value;

    if (inputVal=="" || inputVal ==null) {
        document.getElementById("color").style.backgroundColor = "white";
    }
    else if (inputVal >= 0 && inputVal <= 5) {
        document.getElementById("color").style.backgroundColor = "red";
    }
    else if (inputVal >= 6 && inputVal <= 10) {
        document.getElementById("color").style.backgroundColor = "green";
    }
}

如果我将 inputVal 更改为数组并使用 for 循环保存 document.getElementById("color").value 的值，它将保存用户输入的第一个数字五次，并且只会更新颜色第一个盒子。

这是我尝试过的:

var inputVal = new Array();
for(var i=0; i<5; i++) {
    inputVal[i]= document.getElementById("color").value;
}

Answer 1

您可以将单击的元素作为参数

function check(element) {
    var inputVal = element.value;

    if (inputVal=="" || inputVal ==null) {
        element.style.backgroundColor = "white";
    }

    else if (inputVal >= 0 && inputVal <= 5) {
     element.style.backgroundColor = "red";
    }

    else if (inputVal >= 6 && inputVal <= 10) {
     element.style.backgroundColor = "green";
    }
}

并为每个输入传递参数

<form id="numbers">
    Number1: <input  id ="color1" name="num1" type="number"  onchange="check(this);" />
    <br/><br/>
    Number2: <input   id ="color2" name="num2" type="number" onchange="check(this);" />
    <br/><br/>
    Number3: <input   id ="color3" name="num3" type="number" onchange="check(this);" />
    <br/><br/>
</form>

但是 ID 必须是唯一的。这是FIDDLE