【form表单校验】使用el-form表单校验数组时,change和trigger无法触发校验的解决方案
2023-12-15 15:47:28
原理:change和trigger依赖于组件输入input的事件,数组当然没有相关事件,所以需要监听数组长度,并手动告知form-item,你的数组改变了,需要重新校验。给form-item加上ref。需要注意的是抛出form-item改变信息一定要在下一帧nextTick,不然校验检测不到。
代码:
<el-form-item ref="aa" label-width="0" prop="fileSaves">
{{formDData.fileSaves}}
</el-form-item>
data() {
const isHasFile = (rule, value, callback) => {
if (!value || value.length < 1) {
callback(new Error('请上传附件'));
} else {
callback();
}
};
return {
rules: {
fileSaves: [{ required: true, trigger: ['blur', 'change'], validator: isHasFile }]
},
}
}
watch: {
'formData.fileSaves': {
handler (newVal, oldVal) {
if (!newVal || !newVal.length) {
this.$nextTick(() => {
this.$refs.fileitem.$emit('el.form.change');
});
}
}
}
}
文章来源:https://blog.csdn.net/CSDNwangyi/article/details/135010228
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!