如何使用Yup对单个字段同时配置两个校验规则？

问题原因 #

你在定义校验规则的JS对象中重复声明了title属性，JS对象内同一个键重复定义时，后声明的会完全覆盖先声明的内容，因此你写的必填校验规则被后续的长度校验规则覆盖，自然不会触发。

修复方案 #

将两个校验规则链式挂载到同一个title校验逻辑下即可，Yup 本身支持链式拼接多个校验规则。推荐直接使用 Yup 内置的max方法实现长度限制，无需自定义test逻辑，还能避免空值调用方法报错的问题：

const validationSchema = Yup.object().shape({
  title: Yup.string()
    .required("Title为必填项")
    .label("Title")
    .max(300, "Title不能超过300个字符")
})

如果你确实需要使用自定义test方法实现校验，写法如下：

const validationSchema = Yup.object().shape({
  title: Yup.string()
    .required()
    .label("Title")
    .test('len', 'Title不能超过300个字符', val => {
      // required校验已保证val非空，此处可选链为冗余兼容写法
      return val?.toString().length < 300
    })
})

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