当前位置： 首页 > news >正文

React 强大的表单验证库formik之集成Yup、React Hook Form库

news 2025/7/4 10:00:21

简介

Formik 是为 React 开发的开源表单库，提供状态管理、验证和提交处理功能，可简化复杂表单的开发。

核心优势

‌- 状态管理 ‌：自动跟踪输入值、验证状态和提交进度，无需手动编写状态逻辑。 ‌
‌- 验证功能 ‌：支持声明式验证规则（如字段类型、长度限制、异步验证），实时反馈错误信息。 ‌
‌- 集成能力 ‌：可与 Yup （验证）、 React Hook Form （表单钩子）等库组合使用，扩展功能。

安装

npm install formik

示例

基本用法

import { useFormik } from "formik";export default function Formik() {const formik = useFormik({initialValues: {username: "",email: "",},validate: (values) => {const errors = {};if (!values.username) {errors.username = "用户名是必填项";} else if (values.username.length < 2) {errors.username = "用户名至少2个字符";}if (!values.email) {errors.email = "邮箱是必填项";} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {errors.email = "无效的邮箱地址";}return errors;},onSubmit: (values) => {console.log(values);alert(JSON.stringify(values, null, 2));},});return (<formonSubmit={formik.handleSubmit}className="max-w-sm mx-auto mt-10 p-6 border rounded shadow"><div className="mb-4"><label htmlFor="username" className="block mb-1 font-bold">用户名</label><inputid="username"name="username"type="text"onChange={formik.handleChange}onBlur={formik.handleBlur}value={formik.values.username}className="w-full px-3 py-2 border rounded"/>{formik.touched.username && formik.errors.username ? (<div className="text-red-500 text-sm mt-1">{formik.errors.username}</div>) : null}</div><div className="mb-4"><label htmlFor="email" className="block mb-1 font-bold">邮箱</label><inputid="email"name="email"type="email"onChange={formik.handleChange}onBlur={formik.handleBlur}value={formik.values.email}className="w-full px-3 py-2 border rounded"/>{formik.touched.email && formik.errors.email ? (<div className="text-red-500 text-sm mt-1">{formik.errors.email}</div>) : null}</div><buttontype="submit"className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">提交</button></form>);
}

集成 yup

import { useFormik } from "formik";
import * as Yup from "yup";export default function Formik() {const formik = useFormik({initialValues: {username: "",email: "",},validationSchema: Yup.object({username: Yup.string().min(2, "用户名至少2个字符").required("用户名是必填项"),email: Yup.string().email("无效的邮箱地址").required("邮箱是必填项"),}),onSubmit: (values) => {alert(JSON.stringify(values, null, 2));},});return (<formonSubmit={formik.handleSubmit}className="max-w-sm mx-auto mt-10 p-6 border rounded shadow"><div className="mb-4"><label htmlFor="username" className="block mb-1 font-bold">用户名</label><inputid="username"name="username"type="text"onChange={formik.handleChange}onBlur={formik.handleBlur}value={formik.values.username}className="w-full px-3 py-2 border rounded"/>{formik.touched.username && formik.errors.username ? (<div className="text-red-500 text-sm mt-1">{formik.errors.username}</div>) : null}</div><div className="mb-4"><label htmlFor="email" className="block mb-1 font-bold">邮箱</label><inputid="email"name="email"type="email"onChange={formik.handleChange}onBlur={formik.handleBlur}value={formik.values.email}className="w-full px-3 py-2 border rounded"/>{formik.touched.email && formik.errors.email ? (<div className="text-red-500 text-sm mt-1">{formik.errors.email}</div>) : null}</div><buttontype="submit"className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">提交</button></form>);
}

集成 react-hook-form

import { useForm } from "react-hook-form";export default function Formik() {const {register,handleSubmit,formState: { errors, touchedFields },} = useForm({mode: "onChange",defaultValues: {username: "",email: "",},});const onSubmit = (values) => {console.log(values);alert(JSON.stringify(values, null, 2));};return (<formonSubmit={handleSubmit(onSubmit)}className="max-w-sm mx-auto mt-10 p-6 border rounded shadow"><div className="mb-4"><label htmlFor="username" className="block mb-1 font-bold">用户名</label><inputid="username"{...register("username", {required: "用户名是必填项",minLength: { value: 2, message: "用户名至少2个字符" },})}className="w-full px-3 py-2 border rounded"/>{touchedFields.username && errors.username && (<div className="text-red-500 text-sm mt-1">{errors.username.message}</div>)}</div><div className="mb-4"><label htmlFor="email" className="block mb-1 font-bold">邮箱</label><inputid="email"type="email"{...register("email", {required: "邮箱是必填项",pattern: {value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,message: "无效的邮箱地址",},})}className="w-full px-3 py-2 border rounded"/>{touchedFields.email && errors.email && (<div className="text-red-500 text-sm mt-1">{errors.email.message}</div>)}</div><buttontype="submit"className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">提交</button></form>);
}

formik validate、yup、react-hook-form 集成对比

1. Formik 自带 validate

  • 写法：在 useFormik 里传入 validate 函数，手动校验每个字段，返回错误对象。
  • 优点：
  • 灵活，适合简单或自定义复杂逻辑。
  • 不依赖第三方库。
  • 缺点：
  • 代码冗长，重复性高。
  • 维护性较差，规则多时易出错。
  • 示例：
  validate: (values) => {const errors = {};if (!values.username) {errors.username = "用户名是必填项";} else if (values.username.length < 2) {errors.username = "用户名至少2个字符";}// ... 其他校验return errors;};

2. Formik 集成 Yup

  • 写法：传入 validationSchema，使用 Yup 对象声明式定义规则。
  • 优点：
  • 规则声明式，简洁易读。
  • 支持复杂嵌套、异步校验、类型校验等。
  • 维护性好，易扩展。
  • 缺点：
  • 需额外安装 Yup。
  • 某些极端自定义逻辑需配合 validate。
  • 示例：
  validationSchema: Yup.object({username: Yup.string().min(2, "用户名至少2个字符").required("用户名是必填项"),email: Yup.string().email("无效的邮箱地址").required("邮箱是必填项"),});

3. React Hook Form

  • 写法：通过 register 注册字段时直接传入校验规则，也可结合 Yup。
  • 优点：
  • 语法简洁，性能优异（按需渲染）。
  • 支持原生表单校验、异步校验。
  • 易与 Yup 等 schema 库集成。
  • 缺点：
  • 语法与 Formik 不同，迁移需适应。
  • 复杂表单时需结合第三方库。
  • 示例：
  {...register("username", {required: "用户名是必填项",minLength: { value: 2, message: "用户名至少2个字符" },})}

总结对比表

特性Formik validateFormik + YupReact Hook Form
书写方式手写函数声明式 schema注册时传规则
依赖无Yup无/可选 Yup
代码量多少少
维护性一般好好
灵活性高高高
性能一般一般优
适合场景简单/自定义复杂逻辑规则多/复杂表单性能敏感/大表单

结论：

  • 简单表单可用 Formik 的 validate，复杂表单推荐 Yup 或 React Hook Form。
  • 追求声明式、可维护性优先用 Yup。
  • 性能和体验优先可选 React Hook Form。

 React 强大的表单验证库formik之集成Yup、React Hook Form库 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯

http://www.dtcms.com/a/265757.html

相关文章：

  • 使用 Dockerfile 构建基于 .NET9 的跨平台基础镜像
  • 安卓开机自启动方案
  • Kafka生态整合深度解析：构建现代化数据架构的核心枢纽
  • Sklearn安装使用教程
  • 机器人焊接电源节气阀
  • 工程化实践——标准化Eslint、PrettierTS
  • 读书笔记：《DevOps实践指南》
  • android 网络访问拦截器的编写的几种方式
  • React 学习（3）
  • springboot 中使用 websocket
  • PHP：从入门到实践——构建高效Web应用的利器
  • 2011年英语一
  • AlpineLinux安装x11vnc服务端实现远程桌面登录
  • Zephyr RTOS 防止中断影响数据写入
  • cv610将音频chn0配置为g711a，chn1配置为 aac编码，记录
  • ARM SMMUv3故障和错误（五）
  • mac 电脑安装Homebrew来安装npm与node成功后，安装nvm的流程
  • macOS 26正式发布，全新Liquid Glass设计语言亮相
  • join性能问题，distinct和group by性能，备库自增主键问题
  • 微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
  • 针孔相机模型
  • python学习打卡day59
  • 【轨物洞见】光伏机器人与组件、支架智能化协同白皮书
  • Linux操作系统之文件（二）：重定向
  • Android 系统默认的Launcher3，Android 系统的导航栏（通常是屏幕底部）显示的 4 个快捷应用图标，如何替换这4个应用图标为客户想要的。
  • Fiddler中文版抓包工具在后端API调试与Mock中的巧用
  • Treap树
  • thinkphp8接管异常处理类
  • linux系统 weblogic10.3.6(jar) 下载及安装
  • 后端 Maven打包 JAR 文件、前端打包dist文件、通过后端服务访问前端页面、Nginx安装与部署