检测输入字段值的重复

Posted 2023-05-09

【中文标题】检测输入字段值的重复

【英文标题】：Detect duplication of values of input fields

【发布时间】：2020-08-28 08:02:50

【问题描述】：

我有一个包含多个电子邮件字段的大 html 表单。我想要做的是确保用户不能在多个字段中输入相同的电子邮件。

我通过定义一个数组成功检测到重复，用户输入的每个电子邮件值都被推送到数组中，这就是比较发生的地方。

当检测到重复后我从输入字段中删除值但该值仍然存在于数组中，因此我的函数仍然返回存在重复值时，就会出现问题。

这是我的功能代码：

var filledEmail = [];
var allEmailFields = $("form input[type='email']");

function checkIfArrayIsUnique(myArray) 
  return myArray.length === new Set(myArray).size;


function addToEmails() 
  allEmailFields = $("form input[type='email']");
  filledEmail = [];
  allEmailFields.each(function()
    var currentEmail = $(this);
    currentEmail.bind('change',function() 
      console.log("email value changed");
      filledEmail.push(currentEmail.val());
      console.log(filledEmail);
      if (checkIfArrayIsUnique(filledEmail) == true) 
        console.log("emails unique")
      
      else 
        console.log("emails not unique");
      
    )

  );

任何帮助将不胜感激。

【问题讨论】：

如果你可以使用 ES5+ 看看这个answer

感谢您的帮助！

【参考方案1】：

你可以这样做：

将更改事件侦听器附加到每个元素并检查输入的值是否存在。如果它不存在，请将其添加到您的 filledEmail 数组中，否则什么也不做。

您会看到，如果您在不同的输入元素框中键入相同的名称，它将不会被添加，因此不会在控制台中显示为输出

var filledEmail = [];

document.querySelectorAll("input[type='email']").forEach((mailField,i) => 
  mailField.addEventListener("change", e => 
    const email = e.target.value;
    const hasMail = filledEmail.find(x => x === email);
    if (!hasMail) 
      filledEmail = filledEmail.filter((x, j)=> j!==i);
      filledEmail.push(email);
    
    console.log('filled mails without duplicates', filledEmail)
  );
);

<input type="email" />
<input type="email" />
<input type="email" />
<input type="email" />
<input type="email" />

【讨论】：

非常感谢！这正是我所需要的

在将一个输入从有效条目更改为另一个输入后，将保留数组中不再存在的有效唯一值

你有解决办法吗？

嘿@EugenSunic 不应该是这样：它给出了一个错误我没有定义