检测输入字段值的重复

丽娜·巴苏尼(Lina Basuni)

我有一个带有多个电子邮件字段的大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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

检测输入字段的键盘焦点

来自分类Dev

避免重复输入值

来自分类Javascript

设置输入字段的值

来自分类Dev

自动检测AS3中输入文本字段的值

来自分类Dev

检测HTML输入表的更改的输入值

来自分类Javascript

在文本输入字段中检测Enter键

来自分类Dev

jQuery:检测输入字段中的更改

来自分类Dev

在Edge中检测输入字段中的更改

来自分类Dev

覆盖html输入字段值

来自分类Javascript

提交禁用的输入字段的值

来自分类Dev

检索输入字段设置值

来自分类Dev

删除部分输入字段的值

来自分类Dev

Javascript删除输入字段的值

来自分类Java

检测原始Java数组中的重复值

来自分类Dev

检测输入字段上的输入键按下

来自分类Dev

将逗号分隔的值输入输入字段

来自分类Dev

角度测试无法检测输入值的变化

来自分类Dev

输入验证未检测到空值

来自分类Dev

检测指令中输入值何时更改

来自分类Dev

如何检测输入jQuery的值变化?

来自分类Dev

汇总重复字段的唯一值

来自分类Dev

存储在表字段中重复的多个值

来自分类Dev

Angular 5表单重复输入值

来自分类Dev

如何检测用户输入时输入值的变化?

来自分类Dev

输入字段值不应大于其他字段值

来自分类Dev

jQuery-检测隐藏输入字段上的值更改

来自分类Dev

在提交表单之前,如何检测输入字段上的ENTER键?

来自分类Dev

键入[Angular]时如何检测输入字段中的更改

来自分类Dev

如何使用jQuery检测表单的任何输入字段中的更改?

TOP 榜单

热门标签

归档