使用 Formik 和 Yup 实现 React 表单多重错误信息展示

本文介绍了如何结合 Formik 和 Yup 在 React 表单中实现更灵活的错误信息展示，特别是针对密码等字段，可以同时显示多个验证错误。通过自定义 Yup 的 test 方法，我们可以捕获所有不符合规则的错误信息，并将它们一次性返回给 Formik，从而实现多重错误信息的同步展示。

在使用 Formik 和 Yup 进行表单验证时，默认情况下，Yup 会在遇到第一个错误时停止验证，并返回该错误信息。但在某些场景下，例如密码字段，我们可能希望同时展示所有不符合规则的错误信息，以帮助用户更快速地了解密码的复杂性要求。

以下是如何使用 Yup 的 test 方法来实现这一目标：

import * as Yup from 'yup';
import { useFormik } from 'formik';

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));
    },
  });

  const { errors, touched, getFieldProps } = formik;

  return (
    

      

        Email
        
        {touched.email && errors.email ? (
          
{errors.email}
        ) : null}
      

      

        Password
        
        {touched.password && errors.password ? (
          

            {Array.isArray(errors.password) ? (
              errors.password.map((error, index) => (
                
{error}
              ))
            ) : (
              
{errors.password}
            )}
          
        ) : null}
      

      Submit
    
  );
};

export default MyForm;

代码解释:

ReRoom AI

专为室内设计打造的AI渲染工具，可以将模型图、平面图、草图、照片转换为高质量设计效果图。

下载

1. 引入必要的库: 导入 Yup 用于定义验证规则，useFormik 用于处理表单状态和提交。
2. 定义验证 Schema: 使用 Yup.object() 创建验证 schema。
3. 自定义 test 方法: 针对 password 字段，使用 test 方法自定义验证逻辑。
   • 在 test 方法中，定义一个 errors 数组，用于存储所有验证失败的错误信息。
   • 使用正则表达式测试密码是否满足各个规则（长度、特殊字符、数字、大小写字母）。
   • 如果某个规则不满足，则将相应的错误信息添加到 errors 数组中。
   • 如果 errors 数组不为空，则抛出一个 Yup.ValidationError 异常，并将 errors 数组作为 message 传递。 inner: true 确保Yup能够正确处理嵌套错误。
4. 使用 useFormik: 初始化 useFormik hook，传入 initialValues、validationSchema 和 onSubmit。
5. 展示错误信息: 在表单中，使用 formik.errors 和 formik.touched 来判断是否需要展示错误信息。
   • 因为 errors.password 可能是一个字符串（单个错误）或一个数组（多个错误），所以需要使用条件渲染来处理这两种情况。
   • 如果 errors.password 是一个数组，则使用 map 方法遍历数组，并逐个展示错误信息。

注意事项:

• Yup.ValidationError 的 path 属性必须设置为要验证的字段名（例如 "password"），这样 Formik 才能正确地将错误信息与相应的字段关联起来。
• inner: true 是关键，确保 Yup 能够处理由 test 方法抛出的嵌套错误。
• 在展示错误信息时，需要判断 errors.password 的类型，以正确地渲染错误信息。

总结:

通过自定义 Yup 的 test 方法，我们可以实现更灵活的表单验证逻辑，并能够同时展示多个错误信息。这种方法特别适用于密码等需要满足多个规则的字段，可以有效地提升用户体验。