React Hook Form结合YupResolver失效，登录表单校验异常求助

1. 统一表单类型定义 #

你同时自定义了ILoginModel和通过Yup生成的LoginModelType，可能导致类型不匹配引发异常。直接使用Yup推导的类型即可，删除自定义的ILoginModel：

// 移除自定义的ILoginModel
const {
  handleSubmit,
  register,
  formState: { errors },
} = useForm<LoginModelType>({
  resolver: yupResolver(LoginModelSchema),
});

const submit = async (data: LoginModelType) => {
  const response = await mutateAsync(data);
  console.log('api response', response);
};

2. 确保CustomTextField正确透传props #

Material-UI的TextField需要接收name、onChange、onBlur等props才能和react-hook-form的register正常协作。如果你的CustomTextField是自定义封装组件，必须确保它把所有传入的props透传给底层TextField：

// 正确的CustomTextField封装示例
const CustomTextField = (props) => {
  return <TextField {...props} />;
};

如果封装时手动控制了value或onChange，会覆盖register提供的事件绑定，必须改为透传所有props：

// 错误示例（会破坏register的绑定逻辑）
const CustomTextField = ({ value, onChange, ...props }) => {
  return <TextField value={value} onChange={onChange} {...props} />;
};

3. 完善Yup校验规则 #

给password的required方法添加提示信息，保持规则一致性：

export const LoginModelSchema = object({
  email: string().email().required('Please enter a valid email'),
  password: string()
    .required('Password is required') // 补充必填提示
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/,
      "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and One Special Case Character"
    ),
});

4. 调试表单数据收集 #

在提交函数中添加日志，确认register是否正确收集到表单值：

const submit = async (data: LoginModelType) => {
  console.log('Form data:', data); // 查看是否获取到正确的email和password
  const response = await mutateAsync(data);
  console.log('api response', response);
};

5. 启用实时校验（可选） #

如果想在用户输入时就触发校验，而非仅在提交时，可给useForm添加mode配置：

const {
  handleSubmit,
  register,
  formState: { errors },
} = useForm<LoginModelType>({
  resolver: yupResolver(LoginModelSchema),
  mode: 'onChange' // 输入变化时自动触发校验
});

内容的提问来源于stack exchange，提问作者Gonzalo Alberto Parra Viguie