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

【问题标题】：How do I validate 2 conditions for a single field using Yup validation如何使用 Yup 验证验证单个字段的 2 个条件
【发布时间】：2021-10-27 18:26:43
【问题描述】：

我想检查标题中的文本字段是否已填写，我还想将文本框的限制设置为 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)
   })

【问题讨论】：

标签： reactjs react-native formik yup

【解决方案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")
})

【讨论】：

感谢您的帮助。这个方法奏效了！