yup.js 验证数字字段大于兄弟，或可为空

IT技术 reactjs validation yup
2021-05-25 19:53:14

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

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

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

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

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

让 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 === ''，如果是则返回 null。

以上确实允许空值，以及正确检查整数。但是它没有正确评估yearRenovated > yearBuilt. 我如何正确检查 ifyearRenovated不为空，是否大于yearBuilt？

非常感谢大家的帮助。

3个回答

@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。

 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",
          })

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

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

number().max(5) // is <= 5
其它你可能感兴趣的问题
上一篇Redux 形式：REGISTER_FIELD / UNREGISTER_FIELD 在更改或焦点事件后被调用 下一篇如何使用 google-maps-react 在信息窗口中添加按钮？