如何在Formik React中实现邮箱域名与动态白名单的实时校验

• 第一步：修复现有代码语法问题
  你原有邮箱输入框的name属性缺失开头双引号，修正为：

<FormikTextInput
  name="contactEmail"
  type="text"
  placeholder="example@domain.com"
/>

• 第二步：添加全局实时校验逻辑
  因为你用了Formik框架，直接用其自带的validate校验能力即可，默认开启的validateOnChange配置可以支持不管是修改邮箱还是修改白名单字段，都会实时触发校验，完全符合边输入白名单边校验的需求。
  先写校验函数，逻辑是先提取邮箱的域名部分，再和当前所有已输入的白名单域名做完全匹配校验：

// 表单校验函数
const validateForm = (values) => {
  const errors = {};
  const contactEmail = values.contactEmail?.trim() || '';

  // 基础邮箱格式校验
  if (!contactEmail) {
    errors.contactEmail = '请输入邮箱地址';
    return errors;
  }
  const emailSplit = contactEmail.split('@');
  if (emailSplit.length !== 2) {
    errors.contactEmail = '请输入合法的邮箱格式';
    return errors;
  }
  const targetDomain = emailSplit[1].toLowerCase();
  // 过滤掉白名单里的空输入项，统一转小写避免大小写不匹配
  const validWhitelist = (values.EmailDomainlist || [])
    .map(domain => domain.trim().toLowerCase())
    .filter(Boolean);

  // 白名单为空时的提示，可按需求调整
  if (validWhitelist.length === 0) {
    errors.contactEmail = '请先添加邮箱域名白名单';
    return errors;
  }

  // 没有匹配的白名单域名则报错
  if (!validWhitelist.includes(targetDomain)) {
    errors.contactEmail = 'domain not matching';
    // 需要中文提示可替换为：'邮箱域名不在白名单范围内'
  }

  return errors;
};

• 第三步：给Formik组件绑定校验函数
  将上面的校验函数传入Formik组件即可：

<Formik
  initialValues={{
    contactEmail: '',
    EmailDomainlist: [''] // 初始默认展示1个白名单输入框
  }}
  validate={validateForm}
  validateOnChange={true}
  onSubmit={(values) => {
    // 你的表单提交逻辑
  }}
>
  {/* 此处放你原有的表单结构代码，包括邮箱输入框、白名单动态输入组 */}
</Formik>

• 第四步：错误提示展示
  确保你的FormikTextInput组件内部已做错误展示逻辑：从Formik上下文中取对应字段的errors和touched状态，字段被触碰过且有错误时，在输入框下方展示错误文本即可。

以上实现完全符合需求示例：比如邮箱填了lock@gmail.com，白名单输入y/o/p的过程中，校验时白名单里的内容是y/yo/yop，都和gmail.com不匹配，就会实时提示错误，只有完整输入gmail.com的时候才会通过校验不报错。

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