我有一个带有多个电子邮件字段的大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");
}
})
});
}
任何帮助将不胜感激。
这是您可以执行的操作：
将更改事件侦听器附加到每个元素，并检查输入的值是否存在。如果不存在，则将其添加到您的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" />本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句