如何修改Yup校验框架的默认错误提示为自定义错误消息

Yup所有内置校验规则都支持自定义错误提示，根据使用场景选对应方式即可：

• 单条规则单独配置自定义提示
  所有Yup校验方法都接收第二个参数作为自定义错误文本，直接传入目标提示内容（比如示例的my custom message）就会覆盖框架默认提示。针对给出的代码，只需要给max()规则补上第二个自定义提示参数，同时把原来required()里的'!'替换成自定义内容即可：

const VALIDATION_SCHEME = Yup.object().shape({
  numOne: Yup.Number().required('my custom message'),
  numTwo: Yup.Number()
    .required('my custom message')
    .when('numOne', (numOne, schema) => 
      // max第二个参数传入自定义提示，覆盖默认的max校验错误文案
      schema.max(numOne - 1, 'my custom message')
    )
});

• 全局统一配置默认自定义提示
  如果项目里大量规则要用同一套自定义提示，不需要每个规则重复传参，调用Yup提供的setLocale方法做一次全局配置即可，后续所有没单独传自定义提示的规则，都会优先使用全局配置的文案：

import { setLocale } from 'yup';

// 全局配置校验提示
setLocale({
  number: {
    required: 'my custom message',
    max: 'my custom message'
    // 可按需扩展其他number类型校验的提示，比如min、positive、integer等
  },
  // 也支持按类型配置string、array、date等其他数据类型的校验提示
});

// 全局配置完成后再定义校验schema即可
const VALIDATION_SCHEME = Yup.object().shape({
  numOne: Yup.Number().required(),
  numTwo: Yup.Number()
    .required()
    .when('numOne', (numOne, schema) => schema.max(numOne - 1))
});

*提示优先级说明：单条规则上单独传入的自定义提示 > setLocale全局配置的提示 > Yup内置默认提示。如果需要在提示里插入校验阈值这类动态参数，把提示值写成返回字符串的函数即可，比如max的提示可以写为max: (maxVal) => 输入值不能超过${maxVal}``。

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