- uView中使用form表单组件,如果form-item为正常的input组件,在输入和修改form-item绑定的变量的时候,都会触发form表单的表单验证事件
- 但是如果form-item中不是input组件,而是packer/select等选择组件,此时通过这种选择组件修改form-item绑定的变量的时候,并不会触发form表单的表单验证事件
- 要想选择组件修改变量也能触发form表单验证,需要监听选择组件的选择结束事件,在选择结束的时候手动调用表单的验证事件。比如:
verify() {
this.$refs.uForm.validate(valid => {});
},
confirm(e) {
this.$set(this.form, "province", e.province.label);
this.$set(this.form, "city", e.city.label);
this.$set(this.form, "zone", e.area.label);
this.verify();
},
- 注意: 该方法有一个弊端,由于uView中不提供单项表单验证方式,在选择结束的时候会触发后面表单的验证
- 我解决这个问题的思路为,通过一个变量来控制是否进行手动验证,在用户点击过提交按钮的时候才启动手动验证表单,比如:
data() {
return {
openVerify: false,
}
}
verify() {
if (this.openVerify) {
this.$refs.uForm.validate(valid => {});
}
},
submit() {
this.openVerify = true;
}