Yup同Schema含可选字段时，必填字段验证失效问题

问题场景 #

我用Yup做表单验证，仅将name设为必填项，last_name和document为可选字段，验证Schema如下：

const contatoCadastroSchema = yup.object().shape({
    name: yup.string().min(3, 'Mínimo de 3 letras').required('Nome é obrigatório'),
    last_name: yup.string().min(3, 'Mínimo de 3 letras').notRequired(),
    document: yup.string().test('cpf-validação', 'O CPF deve ser válido', (value) => validarCPF(value)).notRequired()
});

但出现异常：只有提交其他可选字段时，name的必填验证才生效；单独提交name时，必填验证直接失效。尝试以下操作后name验证恢复正常：移除其他字段的验证规则、将可选字段设为必填，或仅删除document的test验证。

问题原因 #

问题出在document字段的自定义test函数上。当仅提交name时，document的值为undefined或空字符串，此时Yup会执行该test函数，若你的validarCPF函数在处理空值/undefined时返回false，会干扰整个Schema的验证逻辑，导致name的必填验证被意外跳过。

解决办法 #

给document的test函数添加前置判断，空值时直接返回true以跳过验证：

const contatoCadastroSchema = yup.object().shape({
    name: yup.string().min(3, 'Mínimo de 3 letras').required('Nome é obrigatório'),
    last_name: yup.string().min(3, 'Mínimo de 3 letras').notRequired(),
    document: yup.string()
        .test('cpf-validação', 'O CPF deve ser válido', (value) => {
            // 空值/undefined时直接通过验证
            if (!value) return true;
            return validarCPF(value);
        })
        .notRequired()
});

也可以用nullable()配合test实现同样效果：

document: yup.string()
    .nullable()
    .test('cpf-validação', 'O CPF deve ser válido', (value) => {
        return value ? validarCPF(value) : true;
    })
    .notRequired()

补充说明 #

Yup的对象验证是整体执行的，自定义test函数处理可选字段时，必须明确空值的处理逻辑。若空值时返回false，Yup会判定该字段验证失败，进而可能干扰其他字段的验证判断，引发这类看似无关的异常。

内容的提问来源于stack exchange，提问作者Amanda M Costa