FormikYup数组验证技巧分享

学习文章要努力，但是不要急！今天的这篇文章《Formik Yup 数组字段条件验证技巧》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

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

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

问题场景

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

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

解决方案

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

1. 定义 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"),
});

2. 使用 test 方法进行条件验证

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

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

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

3. 定义 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;

注意事项

• this.parent 属性在 test 方法中非常有用，它可以访问到父对象，从而获取其他字段的值。
• 错误消息的显示位置可能需要根据实际情况进行调整，因为默认情况下错误消息会显示在 lessonType 字段下方。
• 可以根据实际需求，自定义验证逻辑和错误消息。

总结

通过使用 Yup 的 when 方法和 test 方法，我们可以实现基于数组字段值的条件验证，从而构建更加灵活和强大的表单。在实际开发中，可以根据具体的需求，灵活运用这些方法，来实现各种复杂的表单验证逻辑。

今天关于《FormikYup数组验证技巧分享》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！