如何用Yup验证两个对象的指定属性值不同？

针对你提供的场景，想要校验personA和personB的id值不相同，可以通过Yup的**自定义校验方法.test()**来实现，下面提供两种常用的实现方式：

方式一：给personB的id字段添加自定义校验 #

这种方式会把错误提示直接关联到personB.id字段，更符合表单字段级校验的直观性：

export default Yup.object().shape({
    personA: Yup.object().shape({
        id: Yup.number()
            .typeError("Must be a valid number")
            .required("Required field")
    }),
    personB: Yup.object().shape({
        id: Yup.number()
            .typeError("Must be a valid number")
            .required("Required field")
            .test(
                'id-not-duplicate', // 校验规则的唯一标识（可选，用于调试）
                'personB的ID不能与personA的ID相同', // 错误提示信息
                function(value) {
                    // 通过this.parent获取整个表单的根对象，从而拿到personA的id
                    const { personA } = this.parent;
                    // 先确保personA的id已填写，避免未输入时触发错误
                    if (!personA?.id) return true;
                    // 比较两个id是否不同，返回true表示校验通过，false则触发错误
                    return value !== personA.id;
                }
            )
    })
});

方式二：在根对象上添加全局校验 #

如果希望错误提示关联到整个表单（或者需要同时校验两个字段的状态），可以在根对象上添加自定义校验：

export default Yup.object().shape({
    personA: Yup.object().shape({
        id: Yup.number()
            .typeError("Must be a valid number")
            .required("Required field")
    }),
    personB: Yup.object().shape({
        id: Yup.number()
            .typeError("Must be a valid number")
            .required("Required field")
    })
}).test(
    'ids-not-equal', // 校验规则标识
    'personA和personB的ID不能相同', // 错误提示
    function(value) {
        const { personA, personB } = value;
        // 确保两个id都已填写后再进行比较
        if (!personA?.id || !personB?.id) return true;
        return personA.id !== personB.id;
    }
);

关键说明 #

• .test()方法是Yup实现自定义校验的核心，它需要三个参数：校验标识（用于内部区分）、错误提示文本、校验逻辑函数。
• 在校验函数中，this.parent（方式一）或参数value（方式二）可以获取到整个表单的数据源，从而实现跨字段的属性比较。
• 先判断字段是否已填写再进行比较，是为了避免在用户未完成输入时就触发错误提示，提升表单的用户体验。

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