Formik & Yup：基于数组字段值的条件验证-js教程-PHP中文网

Formik & Yup：基于数组字段值的条件验证

DDD

发布： 2025-07-18 16:26:10

原创

562人浏览过

formik & yup：基于数组字段值的条件验证

本文介绍了如何在使用 Formik 和 Yup 进行表单验证时，根据数组字段的值进行条件验证。针对 lessonType 字段包含 "video" 或 "document" 时，分别验证 videoFile 和 documentFile 是否存在的场景，提供了详细的解决方案和代码示例，帮助开发者实现更复杂的表单验证逻辑。

在使用 Formik 和 Yup 构建表单时，经常会遇到需要根据某些字段的值来动态验证其他字段的情况。当涉及到数组类型的字段时，这种条件验证会变得更加复杂。本文将介绍如何使用 Yup 的 when 方法，结合 test 方法，来实现基于数组字段值的条件验证。

问题场景

假设我们有一个包含模块和课程的表单，每个模块包含多个课程，每个课程可以有不同的类型（例如：视频、文档）。我们需要验证：

如果课程类型 lessonType 包含 "video"，则必须上传视频文件 videoFile。
如果课程类型 lessonType 包含 "document"，则必须上传文档文件 documentFile。

解决方案

Yup 提供了 when 方法来实现条件验证，但由于 lessonType 是一个数组，我们需要使用 test 方法来处理数组的判断逻辑。以下是具体的实现步骤：

定义 Yup 验证 Schema

首先，定义一个 Yup 验证 Schema，包含 modules 数组，每个 module 包含 title 和 lessons 数组，每个 lesson 包含 lessonTitle、lessonType、videoFile 和 documentFile 字段。

import * as Yup from 'yup';

let validationSchema = Yup.object({
  modules: Yup.array(
    Yup.object({
      title: Yup.string()
        .required("A module title is required")
        .min(1, "A module title is required"),
      lessons: Yup.array(
        Yup.object({
          lessonTitle: Yup.string().required("A lesson title is required"),
          lessonType: Yup.array()
            .min(1, "Lesson type is required")
            .required("Lesson type is required")
            .test('file-test', 'File required', function (value) {
              const { videoFile, documentFile } = this.parent;
              if (value && value.includes('video') && (!videoFile || videoFile.length === 0)) {
                return this.createError({ message: 'Video file required when lesson type is video' });
              }
              if (value && value.includes('document') && (!documentFile || documentFile.length === 0)) {
                return this.createError({ message: 'Document file required when lesson type is document' });
              }
              return true;
            }),
          videoFile: Yup.mixed(),
          documentFile: Yup.mixed(),
        })
      ),
    })
  )
    .min(1, "You must add at least one module")
    .required("You must add at least one module"),
});

登录后复制

使用 test 方法进行条件验证

在 lessonType 字段的验证中，我们使用了 test 方法，它允许我们自定义验证逻辑。test 方法接收三个参数：

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

name: 验证名称，用于标识该验证。
message: 验证失败时的错误消息。
test: 验证函数，接收当前字段的值作为参数，并返回 true 表示验证通过，返回 false 或调用 this.createError 表示验证失败。

在验证函数中，我们通过 this.parent 访问父对象，也就是当前的 lesson 对象，从而获取 videoFile 和 documentFile 的值。然后，我们根据 lessonType 数组是否包含 "video" 或 "document" 来判断是否需要验证 videoFile 或 documentFile 是否存在。

定义 videoFile 和 documentFile 字段

需要定义 videoFile 和 documentFile 字段，类型可以设置为 Yup.mixed()，表示可以接收任何类型的值，例如文件对象。

示例代码

以下是一个完整的示例代码，展示了如何使用 Formik 和 Yup 来实现上述条件验证：

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

// Yup validation schema (as defined above)

const MyForm = () => {
  const initialValues = {
    modules: [{
      title: '',
      lessons: [{
        lessonTitle: '',
        lessonType: [],
        videoFile: null,
        documentFile: null,
      }]
    }]
  };

  const onSubmit = (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 400);
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="text" name="modules[0].title" placeholder="Module Title" />
          <Field type="text" name="modules[0].lessons[0].lessonTitle" placeholder="Lesson Title" />
          <Field as="select" name="modules[0].lessons[0].lessonType">
            <option value="video">Video</option>
            <option value="document">Document</option>
          </Field>
          <Field type="file" name="modules[0].lessons[0].videoFile" />
          <Field type="file" name="modules[0].lessons[0].documentFile" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;

登录后复制

注意事项