Yup校验date字段时如何自定义修改Invalid Date默认错误提示文本

Yup的日期类型默认类型错误提示，可以通过内置的typeError方法自定义，该方法专门用于配置字段值类型不匹配时的返回文案，优先级高于默认提示。

单字段自定义 #

直接在yup.date()的链式调用中加入.typeError(自定义提示文本)即可，建议放在日期规则链的靠前位置，提升可读性。
修改后的完整校验schema代码如下：

let scheema= yup.object().shape({
        date: yup.date()
          // 替换为实际需要的自定义日期类型错误提示
          .typeError('Введите корректную дату')
          .min(MIN_DATE, `Дата не может быть раньше ${MIN_DATE?.toLocaleDateString('ru')}`)
          .max(MAX_DATE, `Дата не может быть позже ${MAX_DATE?.toLocaleDateString('ru')}`)
          .required('Обязательное поле'),
        reason: yup.string().required('Обязательное поле'),
        comment: yup.string().max(4000, 'Превышено количество символов'),
    });

配置完成后，传入无法解析为有效日期的值时，date字段的错误提示就会替换为自定义内容，不再返回默认的英文提示。

全局统一配置 #

如果项目中所有日期字段都需要统一的类型错误提示，可以通过Yup提供的setLocale方法做全局配置，不需要每个字段单独编写：

import { setLocale } from 'yup';

// 全局配置Yup默认提示文案
setLocale({
  date: {
    typeError: 'Введите корректную дату'
  }
});

// 后续编写schema时，yup.date()会自动使用全局配置的typeError提示
let scheema= yup.object().shape({
        date: yup.date()
          .min(MIN_DATE, `Дата не может быть раньше ${MIN_DATE?.toLocaleDateString('ru')}`)
          .max(MAX_DATE, `Дата не может быть позже ${MAX_DATE?.toLocaleDateString('ru')}`)
          .required('Обязательное поле'),
        reason: yup.string().required('Обязательное поле'),
        comment: yup.string().max(4000, 'Превышено количество символов'),
    });

如果单个字段单独配置了typeError，会覆盖全局配置的提示内容。

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