React-Native中react-hook-form与Yup表单验证失效问题排查

你的问题核心出在两个配置细节上：

1. react-hook-form的默认验证模式 #

react-hook-form默认采用mode: "onSubmit"模式，只有调用表单提交方法时才会触发完整验证并更新errors对象。但isValid是实时反映表单合规性的状态——初始状态下name字段为空，不满足required规则，所以isValid直接返回false，而此时验证流程未触发，errors自然保持为空。

2. Yup Schema的冗余配置 #

你在Schema外层添加了.required()，这个规则是用来验证整个表单对象是否存在的，但react-hook-form会自动初始化空对象作为表单初始值，该规则不会产生实际作用，反而容易造成逻辑混淆。

解决方法 #

调整useForm配置并简化Schema，代码修改如下：

import { useForm, Controller } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { Text, TextInput } from 'react-native';

// 简化Schema，移除外层冗余的.required()
const schema = yup.object().shape({
  name: yup.string().required('名称不能为空'), // 可添加自定义错误提示
});

const {
  control,
  formState: { errors, isValid },
} = useForm({
  resolver: yupResolver(schema),
  mode: "onChange", // 字段变化时立即触发验证
  defaultValues: { name: "" }, // 明确表单初始值
});

return (
  <>
    <Text>{JSON.stringify(errors)}</Text>
    <Text>{JSON.stringify(isValid)}</Text>
    <Controller
      control={control}
      render={({ field: { onChange, value } }) => (
        <TextInput value={value} onChangeText={onChange} placeholder="输入名称" />
      )}
      name="name"
    />
  </>
);

关键调整说明 #

• mode: "onChange"：用户输入时实时触发验证，此时errors会同步更新，isValid也会随着字段符合规则变为true；若希望失焦时验证，可改为mode: "onBlur"。
• defaultValues：明确初始值，避免react-hook-form处理undefined值时的潜在异常。
• 移除Schema外层.required()：聚焦字段级验证，简化规则逻辑。

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