本文介绍了如何在使用 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 方法接收三个参数：
- 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;注意事项
- this.parent 属性在 test 方法中非常有用，它可以访问到父对象，从而获取其他字段的值。
- 错误消息的显示位置可能需要根据实际情况进行调整，因为默认情况下错误消息会显示在 lessonType 字段下方。
- 可以根据实际需求，自定义验证逻辑和错误消息。
总结
通过使用 Yup 的 when 方法和 test 方法，我们可以实现基于数组字段值的条件验证，从而构建更加灵活和强大的表单。在实际开发中，可以根据具体的需求，灵活运用这些方法，来实现各种复杂的表单验证逻辑。
