React Native项目中Zod与React Hook Form集成后验证不触发问题

云原生阿岚

2026-4-8

这种问题我碰到过好多次，大概率是集成过程中某个细节没做到位，咱们一步步来排查，很快就能找到原因：

先确认依赖是否安装完整
React Hook Form + Zod的集成必须三个包都齐：react-hook-form、zod和@hookform/resolvers。很多人容易漏装最后一个resolver包，要是没它，React Hook Form根本不知道要用Zod做验证。你可以检查下项目的package.json里有没有这三个包，要是缺了就补装：
```
# npm 安装命令
npm install react-hook-form zod @hookform/resolvers
# yarn/pnpm 可替换为对应包管理命令
```

检查Resolver是否正确配置到useForm中
这是最常见的坑！你必须把Zod的resolver传给useForm的配置项，不然React Hook Form还是用默认的验证逻辑，不会触发Zod的规则。正确的写法应该是这样：

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import z from 'zod';

// 完整的Zod验证规则
const signUpSchema = z.object({
  firstName: z
    .string({ required_error: 'First name is required' })
    .min(2, { message: 'First name must be longer than 2 characters' }),
  lastName: z
    .string({ required_error: 'Last name is required' })
    .min(2, { message: 'Last name must be longer than 2 characters' }),
});

// 初始化useForm时必须传入resolver
const { control, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(signUpSchema),
  // 可选：设置验证触发时机，默认是onSubmit，也可设为onChange/onBlur
  mode: 'onSubmit',
});

确认表单字段用Controller正确绑定
React Native的TextInput不像Web输入框那样支持默认的name和ref绑定，必须用React Hook Form提供的Controller组件来包裹，不然表单状态无法被追踪，验证自然不会触发。举个正确的绑定例子：

import { Controller } from 'react-hook-form';
import { TextInput, Text, View } from 'react-native';

// 组件渲染部分
<View style={{ marginVertical: 12 }}>
  <Controller
    control={control}
    name="firstName" // 这个名字必须和Zod Schema里的字段名完全一致，不能拼错！
    render={({ field: { onChange, onBlur, value } }) => (
      <TextInput
        onBlur={onBlur} // 若设置mode为onBlur，这个绑定是触发验证的关键
        onChangeText={onChange} // 注意用React Native的onChangeText，而非Web的onChange
        value={value}
        placeholder="Enter your first name"
        style={{ borderWidth: 1, padding: 8, borderRadius: 4 }}
      />
    )}
  />
  // 别忘了渲染错误信息，不然就算有验证错误你也看不到
  {errors.firstName && <Text style={{ color: 'red', marginTop: 4 }}>{errors.firstName.message}</Text>}
</View>

提交按钮是否正确调用handleSubmit
提交按钮的onPress必须用handleSubmit包裹你的提交逻辑函数，直接调用自己写的onSubmit是不会触发验证的。正确写法：

import { Button } from 'react-native';

// 定义提交逻辑
const onFormSubmit = (formData) => {
  // 这里处理表单提交，比如调用注册API
  console.log('Valid form data:', formData);
};

// 按钮绑定
<Button title="Sign Up" onPress={handleSubmit(onFormSubmit)} />

检查Zod Schema是否完整无语法错误
你贴的代码里lastName的验证规则写了一半（min(2, { me），这种语法错误会导致Schema本身失效，验证逻辑根本跑不起来。一定要确保Schema的语法完全正确，每个字段的规则都闭合，没有遗漏括号、逗号或者属性。

按这个顺序排查下来，基本就能解决验证不触发的问题了，要是还有问题，可以把完整的组件代码贴出来，我再帮你找细节~

内容来源于stack exchange