本文档旨在指导开发者如何结合 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 (
);
};
export default MyForm;代码解释:
- 引入依赖: 引入 formik 和 yup。
- 定义 Yup 验证模式:
-
使用 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 组件中正确渲染这些错误信息。
