本文档旨在指导开发者如何结合 Formik 和 Yup 在 React 应用中实现表单验证，并针对特定字段（如密码）展示所有验证错误信息，而其他字段（如邮箱）则按顺序显示错误。通过自定义 Yup 验证规则，可以灵活控制错误信息的展示方式，提升用户体验。
Formik 与 Yup 简介
Formik 是一个流行的 React 表单库，简化了表单的处理、验证和提交。Yup 是一个 JavaScript 模式验证器，常与 Formik 结合使用，用于定义表单字段的验证规则。
实现多重错误提示的核心思路
核心在于自定义 Yup 的 test 方法，针对需要显示所有错误的字段（例如密码），手动编写验证逻辑，并将所有错误信息收集到一个数组中。如果验证失败，则抛出一个包含所有错误信息的 Yup.ValidationError。
示例代码
以下是一个使用 Formik 和 Yup 实现密码字段多重错误提示的示例：
import React from 'react';import { useFormik } from 'formik';import * as Yup from 'yup';const validationSchema = Yup.object({ email: Yup.string().required("Required field").email("Invalid email format"), password: Yup.string() .required("Required field password") .test({ test: (value) => { let errors = []; if (!/^(?=.{8,})/.test(value)) { errors.push("Must Contain 8 Characters"); } if (!/^(?=.*[!@#$%^&*])/.test(value)) { errors.push("One Special Case Character"); } if (!/^(?=.*[0-9])/.test(value)) { errors.push("One Number"); } if (!/^(?=.*[a-z])/.test(value)) { errors.push("One Lowercase"); } if (!/^(?=.*[A-Z])/.test(value)) { errors.push("One Uppercase"); } if (errors.length > 0) { throw new Yup.ValidationError({ errors: errors, inner: true, path: "password", message: errors, value: value, name: "ValidationError", }); } return true; }, }),});const MyForm = () => { const formik = useFormik({ initialValues: { email: '', password: '', }, validationSchema: validationSchema, onSubmit: (values) => { alert(JSON.stringify(values, null, 2)); }, }); return ( {formik.touched.email && formik.errors.email ? ( {formik.errors.email} ) : null} {formik.touched.password && formik.errors.password ? ( {Array.isArray(formik.errors.password) ? ( formik.errors.password.map((error, index) => ( {error} )) ) : ( {formik.errors.password} )} ) : null} );};export default MyForm;
代码解释:
引入依赖: 引入 formik 和 yup。定义 Yup 验证模式:email: 使用 Yup.string().required().email() 进行非空和邮箱格式验证。password: 使用 Yup.string().required().test() 自定义验证逻辑。test 方法内部，依次进行密码的各个规则验证（长度、特殊字符、数字、大小写字母）。如果任何一个规则验证失败，则将错误信息添加到 errors 数组中。如果 errors 数组不为空，则抛出一个 Yup.ValidationError，其中 errors 属性包含所有错误信息。使用 useFormik Hook:initialValues: 定义表单初始值。validationSchema: 传入 Yup 验证模式。onSubmit: 定义表单提交处理函数。渲染表单:使用 formik.handleChange 和 formik.handleBlur 处理输入框的值变化和失去焦点事件。使用 formik.errors 和 formik.touched 显示错误信息。针对 password 字段，判断 formik.errors.password 是否为数组，如果是，则循环渲染所有错误信息。
注意事项
确保 Yup 版本在 0.29.0 或更高版本，以便支持 Yup.ValidationError 的 inner 属性。path 属性在 Yup.ValidationError 中必须设置为字段名称（例如 “password”），以便 Formik 正确识别错误。根据实际需求调整密码验证规则和错误信息。可以根据需要自定义错误信息的展示样式。
总结
通过结合 Formik 和 Yup，并自定义 Yup 的 test 方法，可以灵活地实现表单字段的多重错误提示。这种方法可以提升用户体验，帮助用户更清晰地了解表单验证的错误信息。 关键在于利用 Yup.ValidationError 传递多个错误信息，并在 React 组件中正确渲染这些错误信息。
以上就是使用 Formik 和 Yup 实现 React 表单多重错误提示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525987.html
微信扫一扫 
支付宝扫一扫 
