正文：

在现代Web应用开发中，动态表单的处理一直是前端工程师面临的常见挑战。特别是当表单包含可变数量的字段组（如用户列表、订单项集合）时，如何实现智能的条件验证成为关键问题。Formik作为React生态中广受欢迎的表单管理库，结合Yup强大的模式验证能力，为我们提供了优雅的解决方案。

让我们从一个常见场景切入：假设我们需要构建一个动态调查问卷表单，其中每个问题都有多个选项，且选项数量由用户动态添加。当用户选择"其他"选项时，必须强制填写文本说明。这种依赖数组索引的条件验证正是Formik+Yup的用武之地。

首先定义Yup的验证模式时，我们需要使用.when()方法实现跨字段的条件判断。以下是一个典型配置：

jsx const validationSchema = Yup.object().shape({ questions: Yup.array().of( Yup.object().shape({ option: Yup.string().required('请选择选项'), remark: Yup.string().when('option', { is: 'other', then: Yup.string().required('选择其他时必须填写说明'), otherwise: Yup.string().nullable() }) }) ) })

这个模式的核心在于：当option字段值为"other"时，remark字段变为必填项，否则允许为空。但需要注意，Yup的.when()方法默认只适用于同级字段验证。如果需要跨数组索引验证（例如根据第一个问题的答案控制后续问题的校验规则），就需要采用更高级的技巧。

对于跨数组项的条件验证，我们可以通过函数式访问父对象来实现。Formik通过context提供了访问整个表单值的途径：

jsx remark: Yup.string().when('$parent.questions[0].answer', { is: 'special', then: Yup.string().required('当第一个问题选择特殊选项时必须填写备注'), otherwise: Yup.string().nullable() })

这里使用$parent前缀访问父级数组的兄弟字段值。这种模式特别适用于问卷跳转逻辑或级联字段验证场景。

实际开发中，我们还需要处理异步验证的情况。例如检查动态添加的电子邮件地址是否已被注册：

jsx email: Yup.string() .email('邮箱格式不正确') .required('必填') .test('unique-email', '该邮箱已被注册', async (value) => { const isRegistered = await checkEmailRegistration(value); return !isRegistered; })

需要注意的是，在数组字段中使用异步验证时，应该合理设置防抖机制以避免频繁的API调用。可以通过Formik的validateOnChange和validateOnBlur配置项优化验证触发频率。

最后，在UI层面实现条件验证反馈时，我们可以利用Formik的ErrorMessage组件与数组字段索引结合：

jsx <ErrorMessage name={`questions.${index}.remark`}> {msg => <div className="error">{msg}</div>} </ErrorMessage>

这种直接指向具体数组索引的错误消息渲染方式，可以精准定位到发生验证失败的动态表单项。

通过上述实践，我们不仅实现了技术层面的条件验证，更重要的是创造了符合用户直觉的表单交互体验。当用户在"其他"选项勾选时立即看到必填提示，而不是在提交后才被告知验证失败，这种即时反馈极大提升了表单的可用性。

Formik和Yup的组合为动态表单验证提供了强大而灵活的解决方案。掌握基于数组字段值的条件验证技巧，能够帮助开发者构建出既严谨又用户友好的复杂表单系统，最终打造出真正专业级的Web应用体验。