当前位置：首页 > React

react实现表单验证

2026-01-27 09:17:18React

使用 React Hook Form 进行表单验证

React Hook Form 是一个轻量级的表单库，提供了高性能的表单验证功能。安装依赖：

npm install react-hook-form

基本用法示例：

import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} />
      {errors.name && <span>This field is required</span>}

      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <span>Please enter number</span>}

      <input type="submit" />
    </form>
  );
}

使用 Yup 进行复杂验证

结合 Yup 可以实现更复杂的验证规则。安装依赖：

npm install @hookform/resolvers yup

示例代码：

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().positive().integer(),
  email: yup.string().email()
});

function App() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register('name')} />
      {errors.name && <p>{errors.name.message}</p>}

      <input {...register('age')} />
      {errors.age && <p>{errors.age.message}</p>}
    </form>
  );
}

自定义验证逻辑

可以直接在 register 方法中定义验证规则：

<input
  {...register('password', {
    validate: value =>
      value.length >= 6 || 'Password must be at least 6 characters'
  })}
/>
{errors.password && <p>{errors.password.message}</p>}

表单状态管理

React Hook Form 提供了多种表单状态：

const {
  isDirty,       // 表单是否被修改
  isValid,       // 表单是否有效
  isSubmitting,  // 表单是否正在提交
  touchedFields, // 被触摸过的字段
  submitCount    // 提交次数
} = formState;

动态表单字段验证

对于动态生成的表单字段，可以使用 Controller 组件：

import { Controller } from 'react-hook-form';

<Controller
  name="test"
  control={control}
  render={({ field }) => <input {...field} />}
/>

错误消息显示优化

可以创建统一的错误显示组件：

function ErrorMessage({ errors, name }) {
  return errors[name] ? (
    <p className="error">{errors[name].message}</p>
  ) : null;
}

// 使用方式
<ErrorMessage errors={errors} name="email" />

react实现表单验证