检测输入字段的值的重复项

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