非必填邮箱字段合法性校验规则的实现方法咨询

完全可以给非必填字段设置校验规则，核心思路是仅当字段有内容时触发格式校验，为空时直接通过。针对你的邮箱字段需求，有两种常用实现方式：

方式一：使用正则规则+显式标记非必填 #

直接在规则中添加邮箱格式的正则，同时显式声明required: false（默认就是非必填，显式写更清晰），再指定校验触发时机即可：

<Form.Item className="form-item" label="邮箱" name="email" rules={[
  {
    required: false,
    pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
    message: '请输入合法的邮箱格式',
    trigger: 'blur' // 可选，可改为'change'实现实时校验
  }
]}>
  <Input placeholder="请输入邮箱（非必填）" />
</Form.Item>

这种方式简洁直接，适合简单的格式校验场景。当用户未输入内容时，校验自动通过；一旦输入内容，就会匹配正则，不符合格式则弹出错误提示。

方式二：自定义校验函数 #

如果需要更灵活的校验逻辑（比如异步校验、多条件判断），可以使用validator自定义校验函数：

<Form.Item className="form-item" label="邮箱" name="email" rules={[
  {
    validator(_, value) {
      // 字段为空时直接通过校验
      if (!value) return Promise.resolve();
      // 校验邮箱格式
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (emailRegex.test(value)) {
        return Promise.resolve();
      }
      return Promise.reject(new Error('请输入合法的邮箱格式'));
    },
    trigger: 'blur'
  }
]}>
  <Input placeholder="请输入邮箱（非必填）" />
</Form.Item>

自定义校验函数通过返回Promise.resolve()或Promise.reject()来控制校验结果，能满足更复杂的业务需求。

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