reactjs - 有没有办法跳过 yup 验证到对象数组中的最后一个对象？

Question

我正在使用 formik 来实现我们的表单。当您在上面的行中添加数据时，我们需要附加新的字段行。在提交表单时，由于新添加的行不符合条件，我们收到了 yup 验证错误。请提出任何解决方案来跳过对新添加的行（最后一行）的验证。

This is the validation schema    

    Yup.object().shape({
        key1: Yup.object({
          key2: Yup.object({
            key3: Yup
              .array()
              .of(Yup.object().shape({
                salary: Yup.object({
                  description: Yup.string().matches(/^([a-zA-Z0-9]+){0,50}$/, 'description is not valid'),
                }),
              })),`enter code here`
          }),
        }),
      });

验证模式适用于整个对象数组，这是预期的行为。

标签： reactjsformikyup

Answer 1

你可以有两种方法。

1 - 在新字段中创建行。

您可以一个包含所有行的字段和另一个仅包含最后一行的字段。这种方式你需要使用setFieldValue，所以当你添加一个新行时，你会得到最后一行字段，推送到所有行的字段，然后设置新的最后一行。

这可能会做太多事情，但是您可以获得一个好处，即对行中的最后一项进行自定义验证（因为它在另一个字段中）。

2 - 是的自定义验证

您可以使用.test来验证数组，可以循环遍历数组并忽略最后一个值。

您还可以在该函数中使用 yup 模式并使用isValidorvalidate来检查它，因此您不需要自己进行测试。

编辑：

我刚刚做了一个例子，你有一个字符串列表，你验证字符串的长度是否大于或等于 3。

它验证数组中的所有项，最后一项除外。