如何使用Yup校验动态文本字段数组，过滤空值并实现必填规则

问题原因 #

你当前的实现不生效是因为 Yup 中数组类型的required()校验只会在值为null/undefined时触发错误，过滤后得到的空数组[]会被判定为有效值，所以全空场景下不会抛出提示。

正确实现 #

按你的需求可以直接调整为如下代码：

array()
  // 仅过滤数组中的空字符串，如果你需要同时过滤0、false等所有假值，可直接写.compact()无需传回调
  .compact(val => val === '')
  // 校验过滤后的数组长度至少为1，空数组时触发错误提示
  .min(1, '该字段不能为空')

逻辑说明 #

• 提交表单时，Yup 会先执行compact对原始数组做转换，自动过滤掉所有空字符串，你直接拿到校验后的值传给后端即可，不需要额外做过滤处理
• 当所有字段都为空时，过滤后的数组长度为0，会触发min校验规则，抛出对应的错误提示

如果你的场景中该数组字段可能出现null/undefined的情况，可以在最后补充required('该字段不能为空')覆盖这类场景。

内容的提问来源于stack exchange，提问作者Ufuk UYSAL