Zod Schema结合valueAsNumber时数字类型自定义错误不显示求助

1. Register方法调用错误 #

你当前的register写法误用了逗号运算符，导致register('phone')的绑定逻辑被丢弃，实际仅传递了{ valueAsNumber: true }，react-hook-form无法正确关联字段与校验规则，自然无法捕获并返回错误信息。

修正写法：
将{...(register('phone'), { valueAsNumber: true })}改为：

{...register('phone', { valueAsNumber: true })}

2. 字段名不匹配 #

组件中TextInput的name属性是phoneNumber，但你的Zod Schema里对应的字段是phone，react-hook-form的字段名必须与Zod Schema完全一致，否则错误无法映射到errors.phone。

修正写法：
把TextInput的name改为phone：

<TextInput
  label="Phone:"
  name="phone"
  placeholder="xxxx-xxxxxxxxx"
  {...register('phone', { valueAsNumber: true })}
  error={errors.phone?.message}
/>

3. 未覆盖类型转换失败的错误消息 #

当用户输入非数字内容时，valueAsNumber会将输入转为NaN，此时Zod的number()校验会触发默认的类型错误，而你仅给min()规则设置了自定义消息，未覆盖类型转换失败场景的提示。

修正Zod Schema：
给number()添加invalid_type_error来覆盖转换失败的错误消息：

const schema= z.object({
  companyName: z.string().min(2, { message: 'Please fill out this field' }),
  companyNumber: z.number({ invalid_type_error: 'Please fill out this field with numbers' }).min(1, { message: 'Please fill out this field with numbers' }),
  email: z.string().email({ message: 'Please fill out this field' }),
  phone: z.number({ invalid_type_error: 'Please fill out this field with numbers' }).min(2, { message: 'Please fill out this field with numbers' }),
});

完成以上三点修改后，自定义错误消息就能正常显示了。

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