React-hook-form配置Yup校验后始终返回空errors问题求助

AI 小北

2026-7-14

React Hook Form 结合 Yup 校验不生效问题解决

你的核心问题是表单校验规则未触发，errors 始终为空对象，即使字段值不符合 Yup 定义的规则。以下是具体原因和解决办法：

可能的原因及解决步骤

1. 未正确导入或安装 `yupResolver`

React Hook Form v7 需使用独立的 @hookform/resolvers 包提供 Yup 解析器，若未安装或导入错误，校验逻辑根本不会执行。

先安装依赖：
```
npm install @hookform/resolvers yup
```

在代码中正确导入：

import { yupResolver } from '@hookform/resolvers/yup';

2. 使用 `register` 绑定 Material-UI TextField 存在值同步问题

Material-UI 的 TextField 是受控组件，直接使用 register 可能存在值同步延迟或校验触发不及时的问题，建议改用 Controller 组件包裹：

修改 CTextField 组件：

import { Controller, useFormContext } from "react-hook-form";
import TextField from "@mui/material/TextField";

export function CTextField() {
  const { control, formState: { errors } } = useFormContext();

  return (
    <Controller
      name="name"
      control={control}
      render={({ field }) => (
        <TextField
          {...field}
          error={Boolean(errors.name)}
          label="name"
          helperText={errors.name?.message || ""}
        />
      )}
    />
  );
}

3. 校验规则的小调整

字符串必填规则可简化，min(1) 和 required 可合并为 yup.string().required("required field")（空字符串会被 required 拦截，无需额外 min）；
数字类型校验时，若用户输入文本，Yup 的 typeError 会触发错误，但需确保值能被正确传递给校验逻辑，Controller 能更好地处理类型转换问题。