Yup嵌套子Schema访问父级RuleSchema的validationTypeCode值方法

Yup本身支持两种常用的方式实现嵌套子Schema读取父级字段值：

方案1：在校验test函数中直接读取根级字段 #

利用test函数上下文的resolve方法配合相对路径的ref，可以直接读取到外层父级的字段值，不需要额外传参，适用于绝大多数场景：

import * as Yup from 'yup'

export const RuleSchema = Yup.object().shape({
    description: Yup.string().required('必填').min(2).max(25),
    fieldId: Yup.number().required('必填'),
    validationTypeCode: Yup.string().required('必填'),
    failureAction: Yup.string().required('必填'),
    failureActionValue: Yup.string().required('必填'),
    dataEntryWorkFlowRuleValidationList: Yup.array().of(
        Yup.object().shape({
            fieldValue: Yup.string().test(
                'fieldValueValidate', // 校验规则名称，可自定义
                '字段值不符合当前校验类型要求', // 错误提示
                function (value) {
                    // 直接读取父级的validationTypeCode
                    const validationTypeCode = this.resolve(Yup.ref('validationTypeCode'))
                    
                    // 示例：根据不同的validationTypeCode走不同校验逻辑
                    switch(validationTypeCode) {
                        case 'EMAIL':
                            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
                        case 'PHONE':
                            return /^1[3-9]\d{9}$/.test(value)
                        default:
                            return value?.length >=5
                    }
                }
            )
        })
    )
})

方案2：通过context传值给子Schema #

如果你需要在多个地方使用该父级字段，也可以在校验触发时将父级字段传入上下文，子Schema通过$前缀直接读取上下文变量：

第一步：定义Schema时使用上下文变量 #

export const RuleSchema = Yup.object().shape({
    // 其他字段保持不变
    description: Yup.string().required('必填').min(2).max(25),
    fieldId: Yup.number().required('必填'),
    validationTypeCode: Yup.string().required('必填'),
    failureAction: Yup.string().required('必填'),
    failureActionValue: Yup.string().required('必填'),
    dataEntryWorkFlowRuleValidationList: Yup.array().of(
        Yup.object().shape({
            fieldValue: Yup.string()
                .when('$validationTypeCode', {
                    is: 'EMAIL',
                    then: (schema) => schema.email('请输入正确的邮箱格式'),
                })
                .when('$validationTypeCode', {
                    is: 'PHONE',
                    then: (schema) => schema.matches(/^1[3-9]\d{9}$/, '请输入正确的手机号'),
                })
                .min(5)
        })
    )
})

第二步：触发校验时传入上下文 #

// 校验时把需要的父级字段传入context
const validateResult = await RuleSchema.validate(formData, {
    context: {
        validationTypeCode: formData.validationTypeCode
    }
})

内容的提问来源于stack exchange，提问作者Dean