You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何使用Yup实现Formik FieldArray嵌套对象数组的前后项依赖校验

你可以通过给Yup.array()追加自定义test校验方法实现跨项依赖校验,具体实现逻辑如下:

在校验函数中遍历整个variablePrice数组,从第二项开始逐一比对当前项的orderMin和前一项的orderMax,不符合规则就抛出对应位置的错误即可,完整校验代码如下:

variablePrice: Yup.array()
  .of(
    Yup.object().shape({
      orderMin: Yup.number()
        .required("orderMin Value is required")
        .positive("orderMin Value can only be a positive number")
        .min(0, "orderMin Value can not be a negative number"),
      orderMax: Yup.number()
        .required("orderMax Value is required")
        .positive("orderMax Value can only be a positive number")
        .moreThan(Yup.ref("orderMin"), "orderMax Value must be higher than the orderMin Value"),
      price: Yup.number()
        .required("Price is required")
        .positive("price can only be a positive number")
        .min(0.01, "Price must be above 0"),
    })
  )
  // 新增跨项依赖校验
  .test(
    'order-sequence-check',
    '后一项的最小起订量必须大于前一项的最大起订量',
    function (value) {
      // 数组为空或者只有1项时直接跳过校验
      if (!value || value.length <= 1) return true;
      
      // 遍历校验每一项和前一项的关系
      for (let i = 1; i < value.length; i++) {
        const prevItem = value[i - 1];
        const currentItem = value[i];
        // 只要有一项不符合就抛出错误,指定错误路径方便Formik定位到对应字段
        if (currentItem.orderMin <= prevItem.orderMax) {
          return this.createError({
            path: `variablePrice[${i}].orderMin`,
            message: `当前最小起订量必须大于上一项的最大起订量(${prevItem.orderMax})`
          });
        }
      }
      return true;
    }
  )

该实现和你原有单字段校验的报错逻辑完全兼容,不符合规则的那一项的orderMin字段会直接显示对应的错误提示。

内容的提问来源于stack exchange,提问作者George Alexopoulos

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.26 21:54:03