防止用户在 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() { 

  $(this).change(function(){ 

    let value = $(this).val();

    let count = 0;

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

      if ($(this).val() != '' && $(this).val() == value) {

        count++;

        if (count > 1) alert('duplicate');

      }

    });

  });

  $(this).addClass('e');

});

$('#createInput').on('click', function(){

  let newInput = document.createElement("input");

  newInput.name = 'code[]';

  newInput.type = 'text';

  newInput.className = 'whatever';

  $('#inputGroup').append(newInput);

  // repeat the eventlistener again:

    $('input[name*="code"]:not(.e').each(function() { 

      $(this).change(function(){ 

        let value = $(this).val();

        let count = 0;

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

          if ($(this).val() != '' && $(this).val() == value) {

            count++;

            if (count > 1) alert('duplicate');

          }

        });

      });

      $(this).addClass('e');

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="inputGroup">

  <input name="code-1" type="text" class="whatever">

  <input name="code-2" type="text" class="whatever2">

  <input name="code-3" type="text" class="whatever3">

</div>

<input type="button" id="createInput" value="Add input">

编辑：现在适用于动态创建的元素。类“e”用作标志，不要将 2 个事件侦听器插入到同一节点元素，否则它们将级联运行，从而引发不需要的行为。

Answer 2

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

function checkDuplicates(){

  var codes = $('input[name^="code"]').toArray().map(function(element){

    return element.value;

  })

  var duplicates = codes.some(function(element, index, self){

    return element && codes.indexOf(element) !== index;

  });

  return duplicates;

}

function flagDuplicates(){

  var inputs = $('input[name^="code"]').toArray();

  var codes = inputs.map(function(element){

    return element.value;

  });

  var duplicates = 0;

  codes.forEach(function(element, index){

    var duplicate = element && codes.indexOf(element) !== index;

    if(duplicate){

        inputs[index].style.backgroundColor = "red";

        inputs[codes.indexOf(element)].style.backgroundColor = "red";

        duplicates++

    }

  });

  return duplicates;

}

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

    //var duplicates = checkDuplicates(); // use this if you only need to show if there are duplicates, but not highlight which ones

    var duplicates = flagDuplicates(); // use this to flag duplicates

    if(duplicates){

    alert(duplicates+" duplicate code(s)");

  }

});

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