JavaScript中如何过滤对象数组排除当前索引以校验表单邮箱重复

核心逻辑 #

校验邮箱是否重复时，跳过当前正在编辑的条目即可，仅比对除当前编辑项之外的所有历史数据邮箱：

• 编辑场景下，若用户保留原有邮箱，不会触发重复校验
• 编辑场景下，若用户修改为其他已存在的邮箱，会正常触发重复提醒
• 新增场景下，所有历史数据都会参与校验，和原有逻辑完全兼容

代码实现 #

已知你可直接获取以下变量：

• 历史数据数组 data
• 当前编辑项索引 editingIndex（新增状态可赋值为-1）
• 表单输入的邮箱值 formEmail

核心校验函数 #

const checkEmailDuplicate = () => {
  return data.some((item, index) => {
    // 仅校验非当前编辑项的邮箱
    return index !== editingIndex && item.email === formEmail.trim()
  })
}

可选优化（大小写不敏感校验） #

避免用户输入大小写不同的同一个邮箱被误判为不重复：

const checkEmailDuplicate = () => {
  const formattedInput = formEmail.trim().toLowerCase()
  return data.some((item, index) => {
    return index !== editingIndex && item.email.toLowerCase() === formattedInput
  })
}

校验调用示例 #

表单提交时调用校验即可：

const handleSubmit = () => {
  if (checkEmailDuplicate()) {
    alert('该邮箱已存在，请更换后重试')
    return
  }
  // 后续提交逻辑...
}

内容的提问来源于stack exchange，提问作者Min Yoongi