使用 Formik 和 Yup 实现密码字段多重错误信息同时显示-js教程-PHP中文网

使用 Formik 和 Yup 实现密码字段多重错误信息同时显示

花韻仙語

发布： 2025-10-03 16:53:50

原创

200人浏览过

使用 formik 和 yup 实现密码字段多重错误信息同时显示

本文介绍如何结合 React.js 的 Formik 和 Yup 库，实现密码字段多重验证错误信息同时显示的功能。通过自定义 Yup 验证规则，将多个密码验证条件整合到一个测试函数中，从而一次性返回所有不符合条件的错误信息，提升用户体验。

在使用 Formik 和 Yup 进行表单验证时，有时我们需要对一个字段进行多重验证，并希望能够一次性显示所有不符合条件的错误信息，特别是对于密码字段，例如要求包含大小写字母、数字、特殊字符以及最小长度等。默认情况下，Yup 会按照验证规则的顺序逐个验证，并只返回第一个遇到的错误。为了解决这个问题，我们可以利用 Yup 的 test 方法自定义验证规则，将多个验证条件整合到一个测试函数中，从而一次性返回所有错误信息。

实现步骤：

自定义 Yup 验证规则：

使用 Yup.string().test() 方法创建一个自定义的验证规则。在这个规则中，我们将编写一个测试函数，用于检查密码是否满足所有预设的条件。

const validationPageTwo = Yup.object({
  email: Yup.string().required("Required field").email(),
  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;
      },
    }),
});

登录后复制

在上面的代码中，test 函数接收一个函数作为参数，该函数接收密码字段的值 value。我们定义一个 errors 数组来存储所有验证失败的错误信息。然后，我们使用正则表达式来测试密码是否满足每个条件，并将不满足条件的错误信息添加到 errors 数组中。

如果 errors 数组不为空，则表示密码验证失败，我们抛出一个 Yup.ValidationError 异常，并将 errors 数组作为 message 传递。这样，Formik 就能捕获到这个异常，并将所有错误信息显示给用户。

集成 Formik：

将自定义的 Yup 验证规则集成到 Formik 中。

ViiTor实时翻译
AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情
```
const formik = useFormik({
  initialValues: {
    email: "",
    password: "",
  },
  validationSchema: validationPageTwo,
  onSubmit: (values) => {
    alert(JSON.stringify(values));
  },
});
```
登录后复制
在上面的代码中，我们将 validationPageTwo 作为 validationSchema 传递给 useFormik hook。
显示错误信息：

从 Formik 中获取错误信息，并在 UI 中显示。
```
const { errors } = formik;

console.log(errors.password);
```
登录后复制
errors.password 将会包含一个包含所有密码验证错误信息的数组。你可以使用这个数组来渲染错误信息列表。