react-hook-form自定义validate校验规则返回的提示信息不显示问题

1. 配置项传参位置错误 #

react-hook-form v6版本中，useFormContext仅用于消费上层FormProvider透传的表单实例，本身不支持传入mode等配置参数。你当前写在useFormContext中的mode: 'all'完全不生效，该配置需要放到上层初始化表单的useForm参数中：

// 上层表单根组件的初始化逻辑
const methods = useForm({
  mode: 'all'
})
// 透传给FormProvider
<FormProvider {...methods}>
  {/* 表单子组件 */}
</FormProvider>

2. 错误信息取值路径不匹配 #

v6版本内置校验规则（required、minLength等）的报错信息默认存放在errors[字段名].message字段下，但自定义validate规则的报错信息存放路径和规则写法绑定：

• 如果是validate: { always: () => {} }的对象写法，报错信息存放在errors[字段名].types.always
• 如果是validate: () => {}的直接函数写法，报错信息存放在errors[字段名].types.validate

你之前应该是统一取了errors[字段名].message，自然拿不到自定义校验的提示。你可以先打印完整的formState.errors结构确认报错已生成，再调整取值逻辑即可，示例如下：

// 假设你的表单项name为test
const testError = formState.errors.test
const errorMsg = testError?.message || Object.values(testError?.types || {})[0]

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