使用 Formik 和 Yup 实现 React 表单多重错误提示-js教程-PHP中文网

使用 Formik 和 Yup 实现 React 表单多重错误提示

碧海醫心

发布： 2025-10-03 17:09:15

原创

534人浏览过

使用 formik 和 yup 实现 react 表单多重错误提示

本文档旨在指导开发者如何结合 Formik 和 Yup 在 React 应用中实现表单验证，并针对特定字段（如密码）展示所有验证错误信息，而其他字段（如邮箱）则按顺序显示错误。通过自定义 Yup 验证规则，可以灵活控制错误信息的展示方式，提升用户体验。

Formik 与 Yup 简介

Formik 是一个流行的 React 表单库，简化了表单的处理、验证和提交。Yup 是一个 JavaScript 模式验证器，常与 Formik 结合使用，用于定义表单字段的验证规则。

实现多重错误提示的核心思路

核心在于自定义 Yup 的 test 方法，针对需要显示所有错误的字段（例如密码），手动编写验证逻辑，并将所有错误信息收集到一个数组中。如果验证失败，则抛出一个包含所有错误信息的 Yup.ValidationError。

示例代码

以下是一个使用 Formik 和 Yup 实现密码字段多重错误提示的示例：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

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 (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          name="email"
          type="email"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.email}
        />
        {formik.touched.email && formik.errors.email ? (
          <div>{formik.errors.email}</div>
        ) : null}
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          name="password"
          type="password"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.password}
        />
        {formik.touched.password && formik.errors.password ? (
          <div>
            {Array.isArray(formik.errors.password) ? (
              formik.errors.password.map((error, index) => (
                <div key={index}>{error}</div>
              ))
            ) : (
              <div>{formik.errors.password}</div>
            )}
          </div>
        ) : null}
      </div>

      <button type="submit">Submit</button>
    </form>
  );
};

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 是否为数组，如果是，则循环渲染所有错误信息。