FormikYup数组验证技巧详解

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《Formik Yup 数组字段条件验证教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

本文讲解如何在使用 Formik 和 Yup 进行表单验证时，根据数组字段 lessonType 的值，对其他字段 videoFile 和 documentFile 进行条件验证。我们将通过 Yup 的 when 方法和自定义 test 函数，实现当 lessonType 包含 "video" 时，videoFile 必须存在；当 lessonType 包含 "document" 时，documentFile 必须存在。

在使用 Formik 和 Yup 构建表单时，经常会遇到需要根据某些字段的值来动态验证其他字段的情况。当涉及到数组类型的字段时，处理起来会稍微复杂一些。本文将介绍如何基于数组字段的值进行条件验证，以确保表单数据的完整性和准确性。

假设我们有以下场景：一个课程模块包含多个课程，每个课程有标题 (lessonTitle) 和类型 (lessonType)。课程类型是一个数组，可以包含 "video" 和 "document" 等值。如果课程类型包含 "video"，则需要上传视频文件 (videoFile)；如果课程类型包含 "document"，则需要上传文档文件 (documentFile)。

为了实现这个条件验证，我们可以使用 Yup 的 test 方法在 lessonType 的验证规则中进行自定义验证。

以下是一个示例 Yup 验证 schema：

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.includes('video') && (!videoFile || videoFile.length === 0)) {
                return this.createError({ message: 'Video file required when lesson type is video' });
              }
              if (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"),
});

代码解释：

• Yup.mixed(): 定义 videoFile 和 documentFile 为混合类型，因为它们可以是文件对象或其他类型的数据。
• .test('file-test', 'File required', function (value) { ... }): 在 lessonType 数组上定义一个自定义测试。
  • value: lessonType 数组的值。
  • this.parent: 指向当前课程对象（包含 lessonTitle, lessonType, videoFile, documentFile 等字段）。
  • this.createError({ message: ... }): 创建一个 Yup 验证错误。
• value.includes('video') && (!videoFile || videoFile.length === 0): 检查 lessonType 数组是否包含 "video" 并且 videoFile 是否为空。
• value.includes('document') && (!documentFile || documentFile.length === 0): 检查 lessonType 数组是否包含 "document" 并且 documentFile 是否为空。

注意事项：

• this.parent 允许您访问当前验证对象的父对象，这对于访问兄弟字段的值非常有用。
• 错误信息将显示在 lessonType 字段下。您可以根据需要调整错误处理逻辑，将错误信息显示在相应的 videoFile 或 documentFile 字段下。
• 如果使用 TypeScript，请确保为 videoFile 和 documentFile 定义正确的类型。

总结：

通过 Yup 的 test 方法，我们可以轻松地实现基于数组字段值的条件验证。这种方法可以灵活地处理各种复杂的验证场景，确保表单数据的有效性和完整性。 记住，良好的表单验证是提升用户体验的关键，它可以帮助用户避免输入错误，并确保数据的质量。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~