Question

我想在Formik中使用yup验证我的表单。假设我有4个字段A，B，C，D，它们都是字符串。如果我想让至少一个字段不为空，那我应该如何编写验证模式，那是一个有效的表格？预先感谢！

Answer 1

如果您不想将验证添加到每个字段，而是为这些事情提供“全局”错误处理程序，则还有另一种可能性。

您将执行以下操作：

const schema = yup.object().shape({
    field1: yup.string().required(),
    field2: yup.string().required(),
    field3: yup.string().required(),
    field4: yup.string().required(),
}).test('yourTestCondition', function (value) {
    // your global test code...
})

Answer 2

在使用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.filed1 || 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.filed1 || this.parent.field2 || this.parent.field3 || this.parent.field4)
      }
    ),

等...

请注意，在这种情况下，我没有使用箭头功能。这是因为要使用'this'上下文，您必须使用此语法，这在Yup文档中已有提及。

Answer 3

针对您要搜索的内容有解决方案。除了为每个元素编写测试之外，您还可以为父元素编写一个测试。模拟全局错误。

yup.object({
field1: yup.string(), 
field2: yup.string(),
field3: yup.string(),
field4: yup.string(),
})
.test('global-ok',
      'you do not fulfill the requirements',
      function (value) {
        return CONDITION OVER THE CHILDREN;
      })

例如，如果您不想为一系列必需的元素编写错误，而只给出一种类型的全局错误。您可以：

    yup.object({
    username: yup.string().required(), 
    password: yup.string().required(),
    email: yup.string().required().test(verify_email),
    })
    .test('global-ok',
          'The data is not correct',
          function (value) {
            return username && password && email;
          })

Answer 4

lazy(value => {
        switch (typeof value) {
          case 'array':
            return array().of(string()).nullable();
          case 'string':
            return string().nullable();
          default:
            return array().of(string()).nullable();
        }
      }),

Answer 5

                email: Yup.string()
                    .when([‘, 'showEmail’, ’anotherField’], {
                        is: (showEmail, anotherField) => {
                            return (showEmail && anotherField);
                        },
                        then: Yup.string().required('Must enter email address')
                    }),

多个字段也可用于验证。处理多个参数的最简单方法

对多个值进行验证

5 个答案: