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

Question

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

上面的DOM不受用户控制。它是通过 php 来的。

此时此刻，我只专注于name="code[]".

这是我尝试过的：

$(function(){

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

    var $current = $(this);

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

        if ($(this).val() == $current.val())

        {

            alert('Duplicate code Found!');

        }

    });

  });

});

问题陈述：

我想知道我应该在上面的 javascript 代码中进行哪些更改，以便在输入重复代码时，应该出现警报消息“发现重复代码”。

Answer 1

您需要为每个项目添加一个事件监听器，而不是为所有项目添加事件监听器。然后计算具有相同值的输入，如果超过 1 个，则为重复。还忽略未填充的输入。检查以下代码片段：$('input[name*="code"]').each(function() {&nbsp;&nbsp; $(this).change(function(){&nbsp;&nbsp; &nbsp; let value = $(this).val();&nbsp; &nbsp; let count = 0;&nbsp; &nbsp; $('input[name*="code"]').each(function() {&nbsp;&nbsp; &nbsp; &nbsp; if ($(this).val() != '' && $(this).val() == value) {&nbsp; &nbsp; &nbsp; &nbsp; count++;&nbsp; &nbsp; &nbsp; &nbsp; if (count > 1) alert('duplicate');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });&nbsp; $(this).addClass('e');});$('#createInput').on('click', function(){&nbsp; let newInput = document.createElement("input");&nbsp; newInput.name = 'code[]';&nbsp; newInput.type = 'text';&nbsp; newInput.className = 'whatever';&nbsp; $('#inputGroup').append(newInput);&nbsp; // repeat the eventlistener again:&nbsp; &nbsp; $('input[name*="code"]:not(.e').each(function() {&nbsp;&nbsp; &nbsp; &nbsp; $(this).change(function(){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; let value = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; let count = 0;&nbsp; &nbsp; &nbsp; &nbsp; $('input[name*="code"]').each(function() {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(this).val() != '' && $(this).val() == value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (count > 1) alert('duplicate');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; $(this).addClass('e');&nbsp; &nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="inputGroup">&nbsp; <input name="code-1" type="text" class="whatever">&nbsp; <input name="code-2" type="text" class="whatever2">&nbsp; <input name="code-3" type="text" class="whatever3"></div><input type="button" id="createInput" value="Add input">编辑：现在适用于动态创建的元素。类“e”用作标志，不要将 2 个事件侦听器插入到同一节点元素，否则它们将级联运行，从而引发不需要的行为。

Answer 2

您可以使用类似的方法，将 jQuery 对象转换为数组来映射值并查找重复项。我添加了一个选项来向重复的输入添加样式，以便用户知道哪些输入是重复的。function checkDuplicates(){&nbsp; var codes = $('input[name^="code"]').toArray().map(function(element){&nbsp; &nbsp; return element.value;&nbsp; })&nbsp; var duplicates = codes.some(function(element, index, self){&nbsp; &nbsp; return element && codes.indexOf(element) !== index;&nbsp; });&nbsp; return duplicates;}function flagDuplicates(){&nbsp; var inputs = $('input[name^="code"]').toArray();&nbsp; var codes = inputs.map(function(element){&nbsp; &nbsp; return element.value;&nbsp; });&nbsp; var duplicates = 0;&nbsp; codes.forEach(function(element, index){&nbsp; &nbsp; var duplicate = element && codes.indexOf(element) !== index;&nbsp; &nbsp; if(duplicate){&nbsp; &nbsp; &nbsp; &nbsp; inputs[index].style.backgroundColor = "red";&nbsp; &nbsp; &nbsp; &nbsp; inputs[codes.indexOf(element)].style.backgroundColor = "red";&nbsp; &nbsp; &nbsp; &nbsp; duplicates++&nbsp; &nbsp; }&nbsp; });&nbsp; return duplicates;}$('input[name^="code"]').on("change", function(){&nbsp; &nbsp; //var duplicates = checkDuplicates(); // use this if you only need to show if there are duplicates, but not highlight which ones&nbsp; &nbsp; var duplicates = flagDuplicates(); // use this to flag duplicates&nbsp; &nbsp; if(duplicates){&nbsp; &nbsp; alert(duplicates+" duplicate code(s)");&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input name="code-1" type="text"><input name="code-2" type="text"><input name="code-3" type="text">