是的，多条件验证答案

【问题标题】：Yup Multi Conditional validation是的，多条件验证
【发布时间】：2020-11-07 16:53:51
【问题描述】：

我有 3 个默认情况下不需要的字段。但是，该规则要求，如果提供了 3 个字段中的任何一个，那么所有 3 个字段都将是必需的。

示例 field_1、field_2 和 field_3

validataionSchema = Yup.object({
  title: Yup.string().max(10, "Max character exceeded").required("This field is required"),
  field_1: Yup.string().max(32, "Max character exceeded"),
  field_2: Yup.string().max(32, "Max character exceeded"),
  field_3: Yup.string().max(32, "Max character exceeded"),
})

我试过了


validataionSchema = Yup.object({
  title: Yup.string().max(10, "Max character exceeded").required("This field is required"),
  field_1: Yup.string().max(15, "Max character exceeded")
    .when(['field_2', 'field_3'], {
      is: (field_2, field_3) => {
        console.log("* field_2, field_3", field_2, field_3)
        return true
      },
      then: Yup.string().required("This field is required")
    }),
  field_2: Yup.string().max(64, "Max character exceeded")
    .when(['field_1', 'field_3'], {
      is: (field_1, field_3) => {
        console.log("** field_1, field_3", field_1, field_3)
        return true
      },
      then: Yup.string().required("This field is required")
    }),
  field_3: Yup.string().max(64, "Max character exceeded")
    .when(['field_1', 'field_2'], {
      is: (field_1, field_2) => {
        console.log("*** field_1, field_2", field_1, field_2)
        return true
      },
      then: Yup.string().required("This field is required")
    }),
})

但是我得到Error: Cyclic dependency, node was:"field_2"

【问题讨论】：

标签： javascript reactjs forms formik yup

【解决方案1】：

为了任何可能对解决方案感兴趣的人的利益

  field_1: Yup.string().max(15, "Max character exceeded")
    .test("field_1", "This field is required as part of Fields details", function(value) {
      let f2 = this.resolve(Yup.ref("field_2"));
      let f3 = this.resolve(Yup.ref("field_3"));
      if ((typeof value === "undefined" && typeof f2 === "undefined" && typeof f3 === "undefined") || typeof value !== "undefined") {
        return true
      }
      return false;
    }),
  field_2: Yup.string().max(64, "Max character exceeded")
    .test("field_2", "This field is required as part of Fields details", function(value) {
      let f1 = this.resolve(Yup.ref("field_1"));
      let f3 = this.resolve(Yup.ref("field_3"))
      if ((typeof value === "undefined" && typeof f1 === "undefined" && typeof f3 === "undefined") || typeof value !== "undefined") {
        return true
      }
      return false;
    }),
  field_3: Yup.string().max(64, "Max character exceeded")
    .test("field_3", "This field is required as part of Fields details", function(value) {
      let f1 = this.resolve(Yup.ref("field_1"));
      let f2 = this.resolve(Yup.ref("field_2"));
      if ((typeof value === "undefined" && typeof f1 === "undefined" && typeof f2 === "undefined") || typeof value !== "undefined") {
        return true
      }
      return false;
    }),

【讨论】：