防止用户在javascript的文本输入中输入重复条目

我有一个DOM，我想防止用户在html文本输入中输入重复的条目

上述DOM不在用户控制范围内。它是通过php实现的

现在，我只关注name=code[]

这就是我尝试过的：

问题陈述：

---

我想知道我应该在上面的javascript代码中做些什么更改，这样当输入重复代码时，就会出现提示消息duplicate code Found

您需要为每个项目添加一个eventlistener，而不是为所有项目添加一个eventlistener。然后对相同值的输入进行计数，如果超过1，则为重复输入

也可以忽略未填充的输入

检查以下代码段：

$'input[name*=code]'。每个函数{ $this.changefunction{ 让value=$this.val； 让计数=0； $'input[name*=code]'。每个函数{ 如果$this.val！=&&$this.val==值{ 计数++； 如果计数大于1，则警报“重复”； } }; }; $this.addClass'e'； }; $'createInput'。单击，函数{ 让newInput=document.createElementinput； newInput.name='code[]'； newInput.type='text'； newInput.className='whatever'； $'inputGroup'.appendnewInput； //再次重复eventlistener： $'input[name*=code]：不是.e'。每个函数{ $this.changefunction{ 让value=$this.val； 让计数=0； $'input[name*=code]'。每个函数{ 如果$this.val！=&&$this.val==值{ 计数++； 如果计数大于1，则警报“重复”； } }; }; $this.addClass'e'； }; };

---

您可以使用类似这样的方法，将jQuery对象转换为数组来映射值并查找重复项。我添加了一个选项，用于向复制的输入添加样式，以便用户知道哪些输入是复制的

函数检查重复项{ 变量代码=$'input[name^=code]'。toArray.mapfunctionelement{ 返回元素.value； } var duplicates=code.somefunctionelement，index，self{ 返回元素&code.indexOfelement！==索引； }; 返回副本； } 函数标志重复{ 变量输入=$'input[name^=code]'。toArray； var代码=inputs.mapfunctionelement{ 返回元素.value； }; 重复变量=0； codes.forEachfunctionelement，索引{ var duplicate=元素&&code.indexOfelement！==索引； 重复的{ 输入[index].style.backgroundColor=红色； 输入[code.indexOfelement].style.backgroundColor=红色； 复制品++ } }; 返回副本； } $'input[name^=code]'。一次更改，函数{ //var duplicates=checkDuplicates；//如果只需要显示是否存在重复项，而不需要突出显示哪些重复项，请使用此选项 var duplicates=flagDuplicates；//使用此选项标记重复项 重复的{ 警报重复+重复代码； } };

---

@班扎伊，我不需要把它拿走。如果在html输入框中输入了重复的代码，我必须显示一条警告消息。嗨，Joel，代码看起来不错。我试图在这里的小提琴中实现您的逻辑，但它似乎不起作用。工作方式是，当您点击+按钮时，它会为您提供一个选项，以将条目添加到输入框中。我想知道您是否可以给我一些指针，指示我需要在小提琴中进行哪些更改。在添加事件侦听器后，将类设置为inputs，因此，您可以在添加新输入后添加我在input:not.class时编写的相同javascript。不知道我是否解释得很好，我已经为html和脚本设置了一个class=code和class=en desc的输入类。脚本正在添加新行。我想知道你能否给我一些指点。

$(function(){

$('input[name^="code"]').change(function() {

    var $current = $(this);

    $('input[name^="code"]').each(function() {
        if ($(this).val() == $current.val())
        {
            alert('Duplicate code Found!');
        }

    });
  });
});