(是的)如何使用单个.test()函数创建多个错误

Question

编辑:虽然接受的解决方案有效，但在我的用例中效果要好得多

我有一个函数验证输入字段Anor输入字段B是空的我的形式是建立的方式，我必须只写一个函数来检查两者。(实际的函数要复杂得多，所以我选择创建下面的示例函数)

这是我的测试函数:

function isValid(message) {
//I don't use the message variable but I added it anyway
return this.test("isValid", message, function (value) {
if(!value.A) {
return createError({path: `${this.path}.A`, message:"A is empty"});
}
if(!value.B) {
return createError({path: `${this.path}.B`, message:"B is empty"});
}
return true;
})

这样做的结果是当A和B为空时，我返回第一个createError，因此函数的其余部分被跳过这就是formik.errors对象看起来像:

{
parent: {
A: "A is empty"
}
}

我如何创建错误数组并返回它?

我试着:

返回createErrors()数组，但我得到了相同的结果，

使用createErrors与路径和消息的数组，但formik。错误看起来像这样:

{
parent.A: { parent.B: "2 errors occured" }
}

而不是所需的:

{
parent: {
a: "A is empty",
b: "B is empty"
}
}

Answer 1

您可以使用Yup中的ValidationError来实现此目标。ValidationError的构造函数接受其他ValidationError实例的数组。单个ValidationError实例能够保存path和错误消息，并且父实例将它们组合在一起。

下面是测试函数示例:

import { ValidationError } from 'yup'
const testFunc = (value) => {
const keys = ['A', 'B']
const errors = keys.map((key) => {
if (value[key]) { return null } // Successful validation, no error
return new ValidationError(
`${key} is empty`,
value[key],
key
)
}).filter(Boolean)
if (errors.length === 0) { return true }
return new ValidationError(errors)
}

根据源代码判断createError也可以做同样的事情。

可以将一个函数而不是字符串传递给createError的message属性。在这种情况下，函数将在createError=>ValidationError.formatError这里。如果这个函数返回一个正确构建的VaildationError实例的数组，我们将得到相同的结果。

下面是该方法的一个示例测试函数:

import { ValidationError } from 'yup'
const testFunc = (value, { createError }) => {
const keys = ['A', 'B']
const errors = keys.map((key) => {
if (value[key]) { return null } // Successful validation, no error
return new ValidationError(
`${key} is empty`,
value[key],
key
)
}).filter(Boolean)
if (errors.length === 0) { return true }
return createError({
message: () => errors
})
}