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

我有一个表单，用户可以使用它输入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";
    }
}

第一：



第二：



第3号：

功能：

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

函数检查（）{
var inputVal=document.getElementById（“颜色”）.value；
如果（inputVal==“”| | inputVal==null）{
document.getElementById（“颜色”）.style.backgroundColor=“白色”；
}
否则，如果（inputVal>=0&&inputVal=6&&inputVal，则可以将单击的元素作为参数

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

功能检查（元素）{
var inputVal=element.value；
如果（inputVal==“”| | inputVal==null）{
element.style.backgroundColor=“白色”；
}
否则，如果（inputVal>=0&&inputVal=6&&inputVal您可以使用jquery来实现这一点。首先删除所有id值，它们不应该相同。然后使用$（'input'）。on（'change'，function（）{
$（this.css（“背景色”、“红色”）}）。。。
通过这种方式，您可以根据值更改颜色。
首先，您可以通过将JavaScript指定为目标
This
，简化JavaScript，因为您正在执行函数
onchange

第二，你永远不应该留下一个开放式的如果…然后…否则，只是坏习惯，当他们可以导致大的变化

第三，正如其他人所指出的，
id
在整个页面中必须是唯一的

尝试一下：


功能检查（tar）{
var inputVal=tar.value；
if（inputVal=''| | inputVal==null）{
tar.style.backgroundColor='白色'；
}否则，如果（inputVal>=0&&inputVal=6&&inputVal当用户更改其值时，将触发函数
giveInputColor
。您可以使用此函数检查类
hello
的无限多个输入

工作示例：

HTML

<input class="hello"/>
<input class="hello"/>
<input class="hello"/>
<input class="hello"/>
<input class="hello"/>



jQuery

$('input.hello').keyup(function(event) {
    /* Act on the event */
    var value = $(this).val();
    $(this).css('backgroundColor', giveInputColor(value));
});

function giveInputColor(value) {
    // Give Input a color based on value parameter
    if (value >= 0 && value <= 5) return 'Red';
    else if (value >= 6 && value <= 10) return 'Green';
    else return 'White';
}

$（'input.hello'）.keyup（函数（事件）{
/*对事件采取行动*/
var值=$（this.val（）；
$（this.css（'backgroundColor'，giveInputColor（value））；
});
函数giveInputColor（值）{
//根据值参数为输入指定颜色
如果（value>=0&&value=6&&value，而不进行任何主要的逻辑重新设计（您可以使其更有效，但我只关注获得您想要的行为），您只需使用事件列表器将函数添加到每个元素中，然后使用
e.target
确定哪个元素是更改并触发函数调用的元素。注意-jQuery中的aproach稍微简化了一点，但我在这里将坚持使用原生JS

首先，让我们为所有这些输入提供一个公共类（“数字字段”），以便更容易找到：

<form id="numbers">
    Number1: <input id="num1" name="num1" type="number" class="number-field">
    <br><br>
    Number2: <input id="num2" name="num2" type="number" class="number-field">
    <br><br>
    Number3: <input id="num3" name="num3" type="number" class="number-field">
    <br><br>
</form>

代码的其余部分只是更新为指向在第一行中确定的变量

最后，函数需要绑定到数字输入，因此，使用我前面添加的
class
属性，您可以找到所有这些输入，循环遍历它们，并向每个输入添加事件侦听器

var numInputs = document.getElementsByClassName("number-field");
for (i = 0; i < numInputs.length; i++) {
    numInputs[i].addEventListener('change', check);
}

var numinput=document.getElementsByClassName（“数字字段”）；
对于（i=0；i

我在本地签出了它，它的行为方式我相信是您想要的。
id
s在文档中必须是唯一的。首先，id对于HTML元素必须是唯一的。^yes请改用
classes
。“对HTML元素进行分类，可以为元素类定义CSS样式。”在本例中，为了测试它们，allIt每次都会找到第一个ID。正如其他人提到的，您的ID必须是唯一的。
var numInputs = document.getElementsByClassName("number-field");
for (i = 0; i < numInputs.length; i++) {
    numInputs[i].addEventListener('change', check);
}