使用Yup、Antd Form与React-Hook-Form验证邮编的问题求助

问题根源分析 #

你的问题主要来自三个核心点：

1. 正则表达式不符合Zip+4规范：原正则/^\d{5,10}(?:[-\s]\d{4})?$/允许5-10位纯数字（比如6位纯数字），这不符合美国邮编的标准格式（仅支持5位数字，或5位+-+4位数字），会导致验证逻辑混乱。
2. 多余的长度测试干扰验证：你添加的length测试是计算整个字符串的长度（包含分隔符-），但这个逻辑完全可以由正则表达式覆盖，反而会在表单状态更新不及时时产生错误判断。
3. 表单状态更新冲突：同时使用setValue（推测是react-hook-form的方法）和Ant Design的form.setFieldsValue更新表单值，会导致表单内部状态不一致，验证时可能读取到旧值。

解决方案步骤 #

1. 修正Zip+4正则表达式

使用符合标准的正则，只允许5位数字或5位+-+4位数字的格式：

zip: yup
  .string()
  .required('Please enter your zip')
  // 严格匹配5位或Zip+4格式
  .matches(/^\d{5}(?:-\d{4})?$/, 'Zip code is invalid')
  .typeError('Please enter a valid zip code'),

如果需要支持空格作为分隔符，可以改成：

.matches(/^\d{5}(?:[-\s]\d{4})?$/, 'Zip code is invalid')

2. 移除多余的length测试

正则已经完全限制了合法格式的长度（5位或10位含分隔符），不需要额外的长度校验，删除这一行：

.test('length', 'Zip code needs to be between 5 and 10 digits', (val: any) => val?.length >=5 && val?.length <=10 )

3. 统一表单状态更新方式

不要同时混用两种表单更新方法，根据你的技术栈二选一：

• 如果用Ant Design Form：

  const handleChangeZipInput = (e: ChangeEvent<HTMLInputElement>) => {
    let zipValue = e.target.value
    zipValue = zipFormater(zipValue)
    // 只保留Ant Design的表单更新方法
    form.setFieldsValue({
      zip: zipValue
    })
  }
  

• 如果用react-hook-form + Ant Design：

  const handleChangeZipInput = (e: ChangeEvent<HTMLInputElement>) => {
    let zipValue = e.target.value
    zipValue = zipFormater(zipValue)
    // 只保留react-hook-form的setValue
    setValue('zip', zipValue)
  }
  

4. 优化格式化函数确保正确性

确保格式化函数在删除字符时能正确移除多余的分隔符，示例实现：

const zipFormater = (value: string) => {
  // 先过滤所有非数字字符
  const pureDigits = value.replace(/\D/g, '')
  // 根据长度决定是否添加分隔符
  if (pureDigits.length > 5) {
    return `${pureDigits.slice(0, 5)}-${pureDigits.slice(5, 9)}`
  }
  return pureDigits
}

这个函数会自动处理输入：

• 输入123456 → 转为12345-6
• 删除6后 → 回到12345（无多余分隔符）

验证效果 #

修改后：

• 输入1234 → 显示必填/格式错误（符合预期）
• 输入12345 → 验证通过
• 输入123456 → 格式化为12345-6，此时因为不完整，正则不匹配会显示错误（符合预期）
• 删除6回到12345 → 验证重新通过

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