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

【问题标题】：How can I use the same function for data validation of multiple input fields using JavaScript?如何使用相同的函数使用 JavaScript 对多个输入字段进行数据验证？
【发布时间】：2015-01-15 03:20:37
【问题描述】：

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

【问题讨论】：

ids 在文档中必须是唯一的。
首先，HTML 元素的 ID 必须是唯一的。
^ 是的，请改用classes。 “对 HTML 元素进行分类，可以为元素类定义 CSS 样式。”在这种情况下对它们进行全部测试
每次都找第一个ID。正如其他人所提到的，您的 ID 必须是唯一的。

标签： javascript html

【解决方案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

【讨论】：

【解决方案2】：

您可以使用 jquery 来实现这一点。首先删除所有 id 值，它们不应该相同。然后使用 $('input').on('change', function (){ $(this).css("background-color","red")})... 这样您就可以根据值更改颜色。

【讨论】：

【解决方案3】：

首先，您可以通过将 JavaScript 指定为目标 this 来简化 JavaScript，因为您正在执行函数 onchange。

其次，你永远不应该留下一个开放式的 IF...THEN...ELSE，这只是一个坏习惯，因为它们会导致重大变化。

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

试试这个：

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

    if(inputVal == '' || inputVal == null) {
        tar.style.backgroundColor = 'white';
    } else if(inputVal >= 0 && inputVal <= 5) {
        tar.style.backgroundColor = 'red';
    } else if(inputVal >= 6 && inputVal <= 10) {
        tar.style.backgroundColor = 'green';
    } else {
        tar.style.backgroundColor = 'yellow';
    }
}

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

这是一个 JSFiddle：http://jsfiddle.net/v1daq6sx/

我希望这会有所帮助。 ^^

【讨论】：

【解决方案4】：

当用户更改他们的值时，它会触发函数giveInputColor。您可以使用这个函数来检查类hello 的无限多个输入。

工作示例：http://codepen.io/anon/pen/bNqraN

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

【讨论】：

【解决方案5】：

无需对您的逻辑进行任何重大的重新设计（您可以使其更高效，但我只专注于获得您正在寻找的行为），您可以简单地将函数添加到带有事件侦听器的每个元素，并且然后使用e.target 确定哪个元素是更改并触发函数调用的元素。注意 - 该方法在 jQuery 中更加精简，但我将在这里坚持使用原生 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>

我还将id 属性设为唯一，并移除了onchange 属性，因为我们将动态添加事件监听器。

然后我们需要更新 check() 函数以接受更改事件作为参数 (e)，该参数在函数的第一行中用于确定触发更改事件的元素，使用 e.target (注意 - e.srcElement 是为了支持旧版本的 IE）。

function check(e) {
    var inputEl = e.target || e.srcElement;
    var inputVal = inputEl.value;

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

代码的其余部分被简单地更新为指向在第一行中确定的变量。

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

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

我在本地检查了它，它的行为方式与我相信你想要的一样。

【讨论】：