菜鸟教程
教程 yup tutorial

与表单库结合

Yup 可以与主流表单库（如 Formik、React Hook Form）无缝结合，实现表单校验和数据验证。

导入方式

js 
import { object, string, number } from 'yup';

`

与 Formik 结合

js 
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { object, string, number } from 'yup';

const schema = object({
  name: string().required('请输入姓名'),
  age: number().required('请输入年龄').positive('年龄必须为正数').integer()
});

function MyForm() {
  return (
    <Formik
      initialValues={{ name: '', age: '' }}
      validationSchema={schema}
      onSubmit={(values) => console.log(values)}
    >
      {() => (
        <Form>
          <Field name="name" />
          <ErrorMessage name="name" />
          
          <Field name="age" />
          <ErrorMessage name="age" />

          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
}
  • validationSchema 属性接收 Yup Schema
  • Formik 会自动进行验证并显示错误信息

与 React Hook Form 结合

js 
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { object, string, number } from 'yup';

const schema = object({
  name: string().required('请输入姓名'),
  age: number().required('请输入年龄').positive('年龄必须为正数').integer()
});

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

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

      <input {...register("age")} />
      <p>{errors.age?.message}</p>

      <button type="submit">提交</button>
    </form>
  );
}
  • 使用 yupResolver 将 Yup Schema 与 React Hook Form 集成
  • 自动管理表单验证和错误信息

小结

  • Yup 与主流表单库兼容
  • 可以统一管理验证规则
  • 提高表单开发效率，减少重复验证逻辑

相关内容