檢測輸入字段值的重復

Question

我有一個帶有多個 email 字段的大 html 表單。 我想要做的是確保用戶不能在多個字段中輸入相同的 email。

我通過定義一個數組成功地檢測到重復，在該數組中，用戶輸入的每個 email 值都被推送到數組中，這就是比較發生的地方。

當檢測到重復后我從輸入字段中刪除該值但該值仍然存在於數組中時，就會出現問題，因此我的 function 仍然返回存在重復值。

這是我的 function 代碼：

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數組中，否則什么也不做。

您會看到，如果您在不同的輸入元素框中鍵入相同的名稱，它將不會被添加，因此不會在控制台中顯示為 output

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