本文介绍了如何在使用 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 ( {({ isSubmitting }) => ( Video Document )} );};export default MyForm;
注意事项
this.parent 属性在 test 方法中非常有用，它可以访问到父对象，从而获取其他字段的值。错误消息的显示位置可能需要根据实际情况进行调整，因为默认情况下错误消息会显示在 lessonType 字段下方。可以根据实际需求，自定义验证逻辑和错误消息。
总结
通过使用 Yup 的 when 方法和 test 方法，我们可以实现基于数组字段值的条件验证，从而构建更加灵活和强大的表单。在实际开发中，可以根据具体的需求，灵活运用这些方法，来实现各种复杂的表单验证逻辑。
以上就是Formik & Yup：基于数组字段值的条件验证的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511164.html
微信扫一扫 
支付宝扫一扫 
