为什么同时使用 number().positive() 和 number().moreThan() 时 Yup 验证不起作用？

Question

根据我的问题标题，它可能与发布的问题相似 here；但是，上下文不同。在我的情况下，我有两个数字字段（即、Min和一个Max）。 Min 值必须是 non-zero 正数且小于 Max 值（如果存在 Max 值）。 Max 值必须是 non-zero 正数并且大于 Min 值（如果存在 Min 值）。当用户尝试提交表单时，我会根据是否不满足这些条件显示错误消息；但是，顺序似乎对确定何时显示错误消息很重要。例如，如果我输入 -5 作为 Min 值和 -2 作为 Max 值，则仅显示 Min 值的错误消息，即使尽管 Max 值违反了“non-zero”规则。

如果有人能提出任何解决方法（如果有的话），我将不胜感激。我在下面包含了我的代码：

maxValue: Yup.number().when(['minValue'], {
    is: (minValue) => Boolean(minValue),
    otherwise: Yup.number().positive().nullable(),
    then: Yup.number().positive().moreThan(Yup.ref('minValue)).nullable(),
}),
minValue: Yup.number().when(['maxValue'], {
    is: (maxValue) => Boolean(maxValue),
    otherwise: Yup.number().positive().nullable(),
    then: Yup.number().positive().lessThan(Yup.ref('maxValue)).nullable(),
}),

Answer 1

我可以通过将 then 链中的 .positive() 替换为 maxValue 并将其替换为 .test('greaterThanZero', 'Value must be greater than zero', value => value ? value > 0 : ' ').

来解决我的问题

为什么同时使用 number().positive() 和 number().moreThan() 时 Yup 验证不起作用？

Why does Yup validation not work when using both number().positive() and number().moreThan()?

reactjs

yup