如何在React中校验输入框邮箱是否存在于给定列表并展示错误提示

你可以直接基于现有代码做三处修改即可完成需求：

1. 补全校验函数 #

在组件内新增如下validate校验函数，逻辑是从表格渲染的数据源filterData中提取所有已存在的邮箱，和当前输入的邮箱做大小写不敏感的比对，同时也支持额外加邮箱格式校验：

const validate = () => {
  // 空输入不报错，如需必填校验可自行修改此处逻辑
  if (!email.trim()) return '';
  // 提取所有已存在的邮箱，统一转小写避免大小写匹配问题
  const existedEmails = filterData.map(item => item.email.toLowerCase());
  if (existedEmails.includes(email.toLowerCase())) {
    return '该邮箱已存在，请更换后重试';
  }
  // 可选：增加邮箱格式校验
  const emailRule = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRule.test(email)) {
    return '请输入正确的邮箱格式';
  }
  return '';
};

2. 优化输入框和按钮的交互 #

修改表单内的输入框和邀请按钮代码，增加错误态样式和禁用逻辑，提升使用体验：

<Form.Input 
  placeholder='请输入邮箱'  
  value={email} 
  onChange={(e,data) => setEmail(data.value)} 
  width={8}
  // 校验不通过时输入框自动标红
  error={!!validate()}
/>
<span style={{padding:'10px',paddingRight:'49px'}} ></span>
<div style={{color:'red'}}>{validate()}</div>

<Form.Select fluid value={role} onChange={(e,data) => setRole(data.value)} options={options} placeholder='选择角色' content="请选择角色"  width={4}/>
<span style={{padding:'10px',paddingRight:'50px'}} ></span>
<Form.Field  
  primary 
  onClick={sendUserInvite} 
  style={{borderRadius:'20px' ,padding:'10px', width:'110px'}} 
  control={Button}
  // 邮箱未填、校验不通过、未选角色时禁用邀请按钮
  disabled={!email.trim() || !!validate() || !role}
>
  邀请
</Form.Field>

3. 邀请逻辑前置校验 #

修改sendUserInvite函数，点击邀请时再做一次兜底校验，避免异常情况跳过前端校验：

const sendUserInvite = () => {
  // 前置校验，有错误直接终止后续逻辑
  const errorMsg = validate();
  if (errorMsg) return;

  // 原有邀请逻辑保持不变
  // ...
}

修改完成后，输入邮箱时会实时和表格内的已有邮箱比对，存在重复时输入框旁立即显示红色错误提示，同时邀请按钮会被禁用，无法提交重复邮箱。

内容的提问来源于stack exchange，提问作者Pruthvi mohan