检测输入字段值的重复

Question

我有一个包含多个电子邮件字段的大 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");
      }
    })

  });
}

任何帮助将不胜感激。

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