Question

我使用.test()创建了一个自定义的Yup验证。

// users is an array of strings
user: Yup.string().test(
  "user-check",
  "At lease one user should be added",
  () => users.length > 0
)

目标是在添加至少一个用户时验证表单。在输入字段中输入用户名（任何字符串值），然后单击按钮将其添加到列表中。

添加第二个用户名（或添加第一个用户名，然后开始在字段中输入）后，验证工作良好。我正在分享此现场演示：https://codesandbox.io/s/hopeful-goldwasser-shpbk

复制步骤

单击文本字段。
输入用户名。
单击红色按钮。

期望

该表格应有效。

您将得到的

表格无效

有任何关于这种奇怪行为的反馈吗？

备注

我不确定这是否是问题的根源。
第一次添加用户，两次验证被称为：第一次是使用空users数组，然后是正确的users值（您是用户）添加）！

Answer 1

Formik表单的范围当前仅包含用户的输入字段。具有用户的数组当前不属于您的表单（不包括在初始值中）。有两种想法可以解决：

将用户数组移动到您的Formik范围中。例如，使用FieldArray（https://jaredpalmer.com/formik/docs/api/fieldarray）。然后，您可以像现在尝试进行验证。
在运行onSubmit时手动进行验证。例如这样的

  const onSubmit = () => {
    if (users.length > 0) {
       // there are some users (form is valid) -> do API call or whatever necessary
    } else {
       // no users (form is not valid) -> display some error
    }
  };

您甚至可以像这样禁用提交按钮（如果使用Formik，这不是正确的方法）：

<input type="submit" value="Submit" disabled={users.length === 0} />

我希望这会有所帮助。如果您有任何疑问，请告诉我，我可以更新答案。

Formik Yup`.test（）`自定义验证无法正常工作

1 个答案: