Yup中required()未阻断后续校验引发报错的技术咨询

问题核心 #

你的代码崩溃是因为Yup同字段的所有链式校验规则会按顺序全部执行，哪怕前面的required()已经触发了错误。required()的作用是标记字段为必填并生成对应错误，但它不会终止当前字段后续的校验逻辑，所以当date_of_birth为undefined时，test函数依然会被调用，导致value.setFullYear()因value为undefined报错。

required()的实际意义 #

根据Yup文档，required()的核心作用是：

• 标记字段为必填项，不允许undefined/null作为值（字符串类型还会把空字符串视为缺失值）
• 当值缺失时生成对应的错误提示
  它不是用来中断后续校验规则的，这是Yup的设计逻辑——同字段的所有规则都会执行，以便收集该字段的所有错误（如果开启了abortEarly: false）。

修复方案 #

你提到的在test中添加空值判断是最直接的解决方式，这里可以优化一下逻辑：

export const registerValidationSchema = yup.object().shape({
    first_name: yup.string().trim().required(),
    last_name: yup.string().trim().required(),
    date_of_birth: yup.date()
        .required()
        .test('DOB', 'You must be at least 18 to register', value => {
            // 若值为空，直接返回true即可——required已经会生成必填错误，不影响最终校验结果
            if (!value) return true;
            return value.setFullYear(value.getFullYear() + 18) < new Date();
        }),
    email: yup.email().trim().required()
});

另外，如果你想让整个对象的校验在第一个错误出现后就停止，可以在调用validate时设置abortEarly: true（默认就是true），但这只会停止其他字段的校验，当前字段的后续规则依然会执行。

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