FormikYUP数组验证实用技巧

在使用 Formik 进行表单管理时，结合 Yup 进行数据验证是常见的做法。本文针对 Formik 和 Yup 结合使用中，数组字段条件验证这一难题，提供了详细的解决方案。核心在于利用 Yup 的 `test` 方法，并结合 `this.parent` 访问同级字段，实现对数组字段 `lessonType` 中包含特定值时，对应文件字段（如 `videoFile`、`documentFile`）是否存在的校验。通过示例代码，深入解析了如何自定义验证逻辑，以及注意事项，帮助开发者灵活应对各种复杂的表单验证场景，提升用户体验。本文是 Formik Yup 数组验证技巧的实用指南。

本文介绍了如何在使用Formik和Yup进行表单验证时，根据数组字段的值进行条件验证。核心在于利用Yup的test方法，结合this.parent访问同级字段，实现对lessonType数组中包含特定值时，对应文件字段是否存在的校验。

在使用Formik进行表单管理，并结合Yup进行数据验证时，经常会遇到需要根据某个字段的值，来决定是否需要验证其他字段的情况。当这个“某个字段”是一个数组时，处理起来会稍微复杂一些。本文将详细介绍如何使用Yup的test方法，来实现基于数组字段值的条件验证。

问题场景

假设我们有一个课程模块的表单，其中每个模块包含多个课程。每个课程可以有不同的类型，例如视频、文档等。我们需要验证，当课程类型包含“视频”时，必须上传视频文件；当课程类型包含“文档”时，必须上传文档文件。

解决方案

Yup提供了test方法，允许我们自定义验证逻辑。我们可以利用test方法，结合this.parent访问同级字段，来实现我们的需求。

示例代码

首先，定义我们的验证Schema：

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

代码解释

1. lessonType: Yup.array().test(...): 我们对lessonType字段使用test方法，定义了一个名为file-test的自定义验证。
2. function (value) { ... }: test方法的参数是一个函数，value是当前字段的值，也就是lessonType数组。
3. const { videoFile, documentFile } = this.parent;: this.parent指向当前lesson对象，通过解构赋值，我们可以方便地访问videoFile和documentFile字段。
4. if (value.includes('video') && (!videoFile || videoFile.length === 0)) { ... }: 判断lessonType数组是否包含'video'，并且videoFile不存在或为空，如果满足条件，则调用this.createError创建一个错误。
5. this.createError({ message: 'Video file required when lesson type is video' });: this.createError用于创建验证错误，message是错误信息。
6. videoFile: Yup.mixed(), documentFile: Yup.mixed(),: 定义videoFile和documentFile的类型为mixed，表示可以是任意类型，这里可以根据实际情况定义为Yup.string()或者Yup.object()等。

注意事项

• this.parent只能在test方法的回调函数中使用。
• 错误信息会默认显示在lessonType字段下方，如果需要显示在对应的文件字段下方，需要自定义错误处理逻辑。
• 需要确保videoFile和documentFile字段存在于Formik的值中，否则this.parent.videoFile和this.parent.documentFile会返回undefined。

总结

通过Yup的test方法，我们可以灵活地实现各种复杂的条件验证。关键在于利用this.parent访问同级字段，并结合JavaScript的逻辑判断，来决定是否需要创建验证错误。在实际项目中，可以根据具体的业务需求，调整验证逻辑和错误信息，以达到最佳的用户体验。

好了，本文到此结束，带大家了解了《FormikYUP数组验证实用技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！