如何使用 Yup 验证验证单个字段的 2 个条件

Question

我想检查标题中的文本字段是否已填写，我还想将文本框的限制设置为300个字符。如果我独立尝试这些条件中的任何一个，它们就会起作用。但是，如果我同时尝试它们，则会执行字符限制验证，但不会执行另一个。

const validationSchema = Yup.object().shape({

     title: Yup.string().required().label("Title"),

     title: Yup.string().test('len', 'Title must be less than 300 characters', val => 
            val.toString().length < 300)
   })

Answer 1

您正在将一个对象传递给 .shape 函数，并且其中的 title 键两次导致第一个定义被覆盖。

您实际需要做的是为 title 创建一个条目，然后将所有验证逻辑作为值：

const validationSchema = Yup.object().shape({

     title: Yup.string()
              .test('len', 'Title must be less than 300 characters', val => 
            val.toString().length < 300)
              .required()
              .label("Title")
})

您还可以将长度测试更改为内置 .max 操作：

const validationSchema = Yup.object().shape({

     title: Yup.string()
              .max(300, 'Title must be less than 300 characters')
              .required()
              .label("Title")
})

如何使用 Yup 验证验证单个字段的 2 个条件

How do I validate 2 conditions for a single field using Yup validation

reactjs

react-native

yup

formik