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

Posted 2023-03-23

【中文标题】Formik Yup `.test()` 自定义验证无法正常工作

【英文标题】：Formik Yup `.test()` custom validation is not working properly

【发布时间】：2020-05-22 17:42:24

【问题描述】：

我使用 .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 值（即您添加的用户）！

【参考方案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 />

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

【参考方案2】：

试试

user: Yup.string().test(
  "user-check",
  "At lease one user should be added",
  async (users) => await users.length > 0
)

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

这应该是对原始问题的评论。但我不认为它真的一针见血。