yup.js 验证数字字段大于同级，或者可为空

Question

我正在使用 Yup.js 来验证一些表单域。

我有两个整数字段，Year Built 和 Year Renovated。

Year Built 是必填字段，Year Renovated 不是。

翻新年份可以留空，但是如果有值它应该大于建造年份（因为翻新肯定必须在建造日期之后发生）。

我相信我需要使用 yup 的 ref() 以及 yup 的 when() 功能。我尝试了以下方法：

let currentYear = new Date().getFullYear();

yup.object().shape({
  yearBuilt     : yup.number().integer().min(1700).max(currentYear+1).required(),
  yearRenovated : yup.number().integer().when(
                    '$yearRenovated', (yearRenovated, schema)=>{
                        return yearRenovated > 0 ? 
                            schema.min(yup.ref('yearBuilt')).max(currentYear+1) :
                            schema.transform(emptyStringToNull).nullable()
                    }
                )
})

* 转换函数 emptyStringToNull 简单地检查 value === '' 和 returns 是否为空。

上面确实允许空值，并且正确地检查了整数。但是它没有正确评估 yearRenovated > yearBuilt。如何正确检查 yearRenovated 是否不为空，它是否大于 yearBuilt？

非常感谢大家的帮助。

Answer 1

@JQuense，repo 的所有者有一个 eloquent 解决方案，使用 moreThan():

const schema = yup.object().shape({
    yearBuilt: yup
      .number()
      .integer()
      .min(1700)
      .max(currentYear+1)
      .required(),
    yearRenovated: yup
      .number()
      .integer()
      .nullable()
      .moreThan(yup.ref("yearBuilt")) //<-- a whole lot neater than using a when conditional...
      .max(currentYear+1)
});

希望对您有所帮助！谢谢@JQuense。

Answer 2

const schema = Yup.object({
  // -- snip --
  billAmount: Yup.number().nullable(),
  approvedAmount: Yup.number()
    .typeError("you must specify a number")
    .notRequired()
    .when("billAmount", (billAmount: any, schema: any) => {
      return schema.test({
        test: (approvedAmount: any) => {
          if (!approvedAmount) return true;
          return approvedAmount < billAmount;
        },
        message: "Approved Amount not gether then billAmount",
      });
    }),
});

Answer 3

是（小于或等于）：https://github.com/jquense/yup/issues/538#issuecomment-495340254

如果您最终需要小于或等于实现 (<=)，请考虑：

number().max(5) // is <= 5

yup.js 验证数字字段大于同级，或者可为空

yup.js Validate number field is larger than sibling, or nullable

validation

reactjs

yup