防止用户在Java脚本的文本输入中输入重复条目-前端问题

prevent users from entering duplicate entries in text inputs in javascript(防止用户在Java脚本的文本输入中输入重复条目)

本文介绍了防止用户在Java脚本的文本输入中输入重复条目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个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!');
        }

    });
  });
});

问题陈述：

我想知道我应该对上面的代码进行哪些更改，以便在输入重复代码时，应该出现警告消息"找到重复代码"。

推荐答案

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

也忽略未填写的输入。

检查以下代码段：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$('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’用作标志，不向同一节点元素插入两个事件侦听器，否则它们将级联运行，从而引发不需要的行为。

这篇关于防止用户在Java脚本的文本输入中输入重复条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！