防止用户在 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 代码进行哪些更改，以便在输入重复代码时，应该出现警告消息 "Duplicate code Found"。

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

编辑：现在适用于动态创建的元素。 class '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">

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

prevent users from entering duplicate entries in text inputs in javascript

html

javascript

alert

input