Vue js vuelidate 无法读取动态验证模式中的自定义验证
Vue js vuelidate cannot read custom validation inside the dynamic validation schema
我有这个UI。如果用户选中 All dates
,它将布尔变量 is_all_dates
设置为 true
。这意味着用户不关心日期范围 he/she 想要所有数据而不对其进行过滤按日期范围。
另一方面,如果用户不检查 All dates
我需要验证 3 件事。
- He/she 输入开始日期(需要)
- He/she 输入截止日期(必填)
- 从日期 < 到日期(自定义验证器)
为了达到这个要求,我使用了动态验证模式。
我只需要验证 All dates
是否等于 false。否则我根本不需要验证。
validations() {
if (!this.is_all_dates) {
return {
from: {
required
},
to: {
required,
date_greather_than
}
};
}
},
我这样声明我的 date_greather_than
验证。
<script>
const date_greather_than = (value, vm) => {
let from = new Date(vm.from);
let to = new Date(value);
return from < to;
};
export defaults:{
validations(){},
data(){return{}}
}
</script>
但问题是我出错了
TypeError: Cannot read property 'date_greather_than' of undefined
我的自定义验证器在 validations() 函数中无法识别
我可以这样使用关键字this
。这是语法错误。
to: {
required,
this.date_greather_than
}
我找到了答案。这里的问题是我只指定了 if 部分。通过同时指定 if 部分和 else 部分,我的代码按预期工作。
validations() {
if (this.is_limit_by_range) {
return {
to: { required, date_greather_than },
from: { required },
status: { required }
};
} else {
return {
status: { required }
};
}
}
我有这个UI。如果用户选中 All dates
,它将布尔变量 is_all_dates
设置为 true
。这意味着用户不关心日期范围 he/she 想要所有数据而不对其进行过滤按日期范围。
另一方面,如果用户不检查 All dates
我需要验证 3 件事。
- He/she 输入开始日期(需要)
- He/she 输入截止日期(必填)
- 从日期 < 到日期(自定义验证器)
为了达到这个要求,我使用了动态验证模式。
我只需要验证 All dates
是否等于 false。否则我根本不需要验证。
validations() {
if (!this.is_all_dates) {
return {
from: {
required
},
to: {
required,
date_greather_than
}
};
}
},
我这样声明我的 date_greather_than
验证。
<script>
const date_greather_than = (value, vm) => {
let from = new Date(vm.from);
let to = new Date(value);
return from < to;
};
export defaults:{
validations(){},
data(){return{}}
}
</script>
但问题是我出错了
TypeError: Cannot read property 'date_greather_than' of undefined
我的自定义验证器在 validations() 函数中无法识别
我可以这样使用关键字this
。这是语法错误。
to: {
required,
this.date_greather_than
}
我找到了答案。这里的问题是我只指定了 if 部分。通过同时指定 if 部分和 else 部分,我的代码按预期工作。
validations() {
if (this.is_limit_by_range) {
return {
to: { required, date_greather_than },
from: { required },
status: { required }
};
} else {
return {
status: { required }
};
}
}