React Hook Form中Rules.Validate未触发问题求助

几个常见问题及修复方式 #

1. 自定义校验函数返回值不符合要求 #

React Hook Form的validate函数必须返回布尔值或者错误字符串，如果你的wtf函数没正确返回结果，校验逻辑根本不会生效。举个例子：

• 错误写法：

const wtf = (value) => {
  if (value.includes('xxx')) {
    console.log('不符合规则')
    // 未返回任何结果，校验等于没执行
  }
}

• 正确写法：

const wtf = (value) => {
  if (value.includes('xxx')) {
    return '不能包含xxx字符' // 返回错误提示文本
    // 或者直接返回false：return false
  }
  return true // 校验通过必须返回true
}

2. 校验触发时机配置错误 #

虽然你试过切换revalidate模式，但得确保useForm的mode或者Controller的reValidateMode确实设置成了能在输入变化时触发的模式：
要么在初始化useForm时全局指定：

const { control, formState: { errors } } = useForm({
  mode: 'onChange', // 输入内容变化时立即触发校验
  // 若需要失去焦点才校验，可改用'onBlur'
})

要么给当前Controller单独设置：

<Controller
  control={control}
  name="name"
  defaultValue=""
  reValidateMode="onChange" // 单独指定该字段的校验触发时机
  rules={{
    required: true,
    minLength: 3,
    maxLength: 300,
    validate: wtf,
  }}
  // ...其他属性
/>

3. 自定义函数存在定义问题 #

检查wtf函数是否有拼写错误，或是作用域问题导致未被正确引用。如果担心组件重渲染影响函数引用，可以用useCallback包裹：

import { useCallback } from 'react'

// ...

const wtf = useCallback((value) => {
  // 你的校验逻辑
}, [])

4. 优化错误信息展示逻辑 #

你代码里helperText用了formState?.errors?.name?.message，其实fieldState.error已经包含当前字段的错误信息，统一写法更清晰（虽不会导致校验不触发，但能提升代码可读性）：

render={({ field, fieldState: { error } }) => (
  <TextField
    {...field}
    fullWidth
    label="Name"
    size="small"
    helperText={error?.message} // 直接使用fieldState的error信息
    error={!!error}
  />
)}

完整可运行示例 #

import { useForm, Controller } from 'react-hook-form'
import TextField from '@mui/material/TextField'

const MyForm = () => {
  const { control, formState: { errors } } = useForm({
    mode: 'onChange'
  })

  const wtf = (value) => {
    if (value?.includes('test')) {
      return '输入内容不能包含"test"'
    }
    return true
  }

  return (
    <Controller
      control={control}
      name="name"
      defaultValue=""
      rules={{
        required: '这是必填项',
        minLength: { value: 3, message: '最少需要3个字符' },
        maxLength: { value: 300, message: '最多允许300个字符' },
        validate: wtf,
      }}
      render={({ field, fieldState: { error } }) => (
        <TextField
          {...field}
          fullWidth
          label="Name"
          size="small"
          helperText={error?.message}
          error={!!error}
        />
      )}
    />
  )
}

export default MyForm

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