【老曹前端插件推荐】爆笑流讲解前端 Formik + Yup：前端表单界的“最佳拍档”

😂 爆笑幽默讲解 Formik + Yup：前端表单界的“最佳拍档”

---

🧠 一、Formik 是谁？Yup 又是谁？

Formik：

一个专门帮你 管理表单状态的库，就像你妈催你填高考志愿一样，它会提醒你：

• 这个字段还没填！
• 这个邮箱格式不对！
• 这个密码太简单了！

Yup：

一个 表单验证规则库，可以理解为“表单界的审查员”，它会说：

• “你这个身份证号格式不对，重写！”
• “年龄不能是负数，你以为你是穿越者吗？”

---

🎬 二、他们的爱情故事（Formik + Yup）

Formik 和 Yup 就像一对情侣：

• Formik 负责表单的输入、变化和提交。
• Yup 负责给这些输入加“正则约束”——也就是验证规则。

他们一起出现的时候，就变成了：

“我来帮你记住你填了啥，再告诉你是不是符合规矩。”

---

💻 三、Formik 的三大核心概念（搞笑版解释）

概念	正经解释	搞笑解释
initialValues	设置表单初始值	给表单“预设人生目标”
onSubmit	提交时触发的函数	表单的“终极梦想”
validationSchema	使用 Yup 定义的校验规则	表单的“行为规范手册”

---

🧪 四、Yup 的几个常用规则（带吐槽）

规则	作用	大白话
.required()	必填项	“不写不行，别想逃！”
.min(6)	最少长度6	“你这密码也太短了吧，黑客分分钟破解你！”
.max(20)	最多长度20	“你写小说呢？这是用户名不是自传！”
.email()	验证邮箱格式	“@后面必须有.com，不然你这是哪个星球的邮箱？”
.matches()	自定义正则匹配	“你要按我的规则来，否则我就给你报错！”
.oneOf([ref('password')])	两个字段必须一致（如确认密码）	“两次写的不一样？你是在测试我的视力吗？”

---

🤖 五、Formik 上手流程（程序员崩溃现场）

1. 安装依赖

   npm install formik yup
   

2. 引入 Formik 组件

   import {
        
         Formik, Form, Field, ErrorMessage } from 'formik';
   

3. 定义初始值

   initialValues={
        
        {
        
        
     username: '',
     email: '',
     password: ''
   }}
   

4. 定义 Yup 验证规则

   const validationSchema = Yup.object({
        
        
     username: Yup.string().required('用户名不能为空'),
     email: Yup.string().email('邮箱格式不对').required('必须填写邮箱'),
     password: Yup.