# 与表单库结合

URL: https://caijiao.org/yup/forms
Source: docs/yup/forms.md
Description: 介绍 Yup 如何与 Formik、React Hook Form 等表单库结合使用。

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 (
    
  );
}
```

* `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 与主流表单库兼容
* 可以统一管理验证规则
* 提高表单开发效率，减少重复验证逻辑