如何使用 Yup 验证一个字段与另一个字段的对比？

Question

我正在设置一个包含两个字段的表单；开始月份和结束月份。

开始月份和结束月份只是用整数（0-11）表示对应的月份。我需要验证以确保结束月份在开始月份之后（即结束月份的整数更大）。

几年前我也看过其他类似的问题，但 yup 似乎已经更新，使它们变得无用。我已经尝试了以下代码，但有一些变化。

我也很难将结束月份验证为数字（.number() - 我假设我必须在测试函数中执行此操作。

let schema = yup.object().shape({
  startMonth: yup
    .number()
    .required()
    .positive()
    .integer(),
  endMonth: Yup.string().test(
  "End Month Validation",
  "error message",
  value => {
    return value > startMonth;
  }
)
.number()
.required()
.positive()
.integer(),
});

Errors: Line 102: 'startMonth' is not defined no-undef

Answer 1

另一种方法是利用 .ref() and .moreThan() 来执行此验证逻辑。

像下面这样的东西应该能达到你的要求：

let schema = Yup.object().shape({
  startMonth: Yup
    .number()
    .required()
    .positive()
    .integer(),
  endMonth: Yup.number() /* Remove .string() */
    .required()
    .positive()
    /* Reference startMonth field in validating endMonth value */
    .moreThan(Yup.ref('startMonth'), "End month must come after start month")
    .integer(),
});

schema.validate({ startMonth : 1, endMonth : 2 })  // Okay!
schema.validate({ startMonth : 11, endMonth : 2 }) // Throws exception

希望对您有所帮助！

如何使用 Yup 验证一个字段与另一个字段的对比？

How to validate one field against another with Yup?

reactjs

yup