如何使用Yup库校验数组元素总和与指定数值是否一致

可以直接通过Yup实现该校验需求，无需额外编写独立的自定义校验函数，使用Yup内置的test方法即可实现跨字段关联校验，示例代码如下：

方案1：错误信息绑定到total字段（推荐） #

这种写法校验不通过时，错误信息会归属到total字段下，适合需要在总金额输入框旁展示错误提示的表单场景：

const schema = yup.object().shape({
  products: yup.array().of(yup.object().shape({
    id: yup.number().required(),
    sum: yup.number().required(),
  }))
  .min(1)
  .required(),
  total: yup.number()
    .min(10)
    .required()
    // 追加自定义校验规则
    .test('sum-match', '商品金额总和与总金额不匹配', function (totalValue) {
      // 此处不能用箭头函数，需要通过this获取Yup上下文
      const products = this.parent.products || [];
      const calculatedTotal = products.reduce((sum, product) => sum + (product.sum || 0), 0);
      return calculatedTotal === totalValue;
    })
});

方案2：错误信息绑定到全局表单 #

如果需要校验不通过时展示全局提示，可以把自定义校验加在顶层对象上：

const schema = yup.object().shape({
  products: yup.array().of(yup.object().shape({
    id: yup.number().required(),
    sum: yup.number().required(),
  }))
  .min(1)
  .required(),
  total: yup.number().min(10).required(),
// 顶层追加全局校验
}).test('total-check', '商品金额总和与总金额不匹配', function (formValue) {
  const calculatedTotal = formValue.products.reduce((sum, product) => sum + product.sum, 0);
  return calculatedTotal === formValue.total;
})

内容的提问来源于stack exchange，提问作者Лукас