formik - 是的，对多个值进行验证

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 个字段中的每一个编写一个“测试”，以确保 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 文档中提到了这一点。