对多个值进行YUP验证

人气:270 发布:2023-01-03 标签: formik yup

问题描述

我想在formik中使用yup来验证我的表单。假设我有4个字段A、B、C、D,它们都是字符串。如果我希望至少有一个字段不是空的,那么这是一个有效的表单,我应该如何编写验证模式?提前感谢!

推荐答案

使用YUP时,如果所有正常功能都失败了,您可以使用.test功能,这里介绍了-https://github.com/jquense/yup#mixedtestname-string-message-string--function-test-function-schema

Mixed.test(名称:字符串,消息:字符串|函数,测试:函数):架构

将测试函数添加到验证链。测试在强制转换任何对象之后运行。许多类型都内置了一些测试,但您可以很容易地创建自定义测试。为了允许异步自定义验证,所有(或不)测试都是异步运行的。其结果是无法保证测试执行顺序。

对于您的实现,您需要为4个字段中的每一个都编写"测试",以确保4个字段中的一个不为空。

field1: yup
    .string()
    .test(
      'oneOfRequired',
      'One of Field1, Field2, Field3 or Field4 must be entered',
      function(item) {
        return (this.parent.field1 || this.parent.field2 || this.parent.field3 || this.parent.field4)
      }
    ),
field2: yup
    .string()
    .test(
      'oneOfRequired',
      'One of Field1, Field2, Field3 or Field4 must be entered',
      function(item) {
        return (this.parent.field1 || this.parent.field2 || this.parent.field3 || this.parent.field4)
      }
    ),

等...

请注意,在本例中,我没有使用箭头函数。这是因为要使用‘This’上下文,您必须使用此语法,YUP文档中提到了这一点。

26