是的，对多个值进行验证

Question

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

Answer 1

在使用 Yup 时，如果所有正常功能都让您失望，您可以使用 .test 功能，记录在此处 - https://github.com/jquense/yup#mixedtestname-string-message-string--function-test-function-schema

mixed.test(name: string, message: string | function, test: function): Schema

Adds a test function to the validation chain. Tests are run after any object is cast. Many types have some tests built in, but you can create custom ones easily. In order to allow asynchronous custom validations all (or no) tests are run asynchronously. A consequence of this is that test execution order cannot be guaranteed.

对于您的实施，您需要为 4 个字段中的每一个编写一个 "test"，以确保这 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 文档中提到了这一点。

Answer 2

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

你会这样做：

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 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')
                    }),

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

Answer 6

如果您更喜欢 ES6 并且想使用 箭头函数 ，答案的修改版本将是这样的:

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

详情，official docs。

是的，对多个值进行验证

yup validation on multiple values

yup

formik