ZAR*_*ZAR 3 validation reactjs yup
我正在使用 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()
}
)
})
Run Code Online (Sandbox Code Playgroud)
* 转换函数,emptyStringToNull
简单地检查是否value === ''
,如果是则返回 null。
以上确实允许空值,以及正确检查整数。但是它没有正确评估yearRenovated > yearBuilt
. 如何正确检查 ifyearRenovated
不为空,是否大于yearBuilt
?
非常感谢大家的帮助。
@JQuense,repo 的所有者有一个雄辩的解决方案,使用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)
});
Run Code Online (Sandbox Code Playgroud)
希望有帮助!谢谢@JQuense。
归档时间: |
|
查看次数: |
4372 次 |
最近记录: |