element-ui图片上传不为空的表单验证

在做表单提交时,使用了element-ui的upload组件进行图片上传。

没有内容时,进行提交,出现下图

element-ui图片上传不为空的表单验证_第1张图片

目前一切正常,但是当我将内容都填上时,其他的验证信息都消失了,图片的仍然在,如图

element-ui图片上传不为空的表单验证_第2张图片

虽然不影响提交,但是不太好看,需要处理。

于是上官网找了一圈,发现upload组件没有事件,比如input组件的blur,change,focus之类的

这就不能在rule中的通过trigger来触发验证了

但是在官网上发现了on-success的钩子函数,只需要在上传成功后再次调用表单验证就OK了

然而我不是用的action提交,上传是自己写了一个方法

element-ui图片上传不为空的表单验证_第3张图片

此时,只需在图片上传成功的回调中,再次调用表单的验证就可以了。

哈哈哈哈,最后看一下效果吧

element-ui图片上传不为空的表单验证_第4张图片

没得问题,嗖嗨皮!!!

你可能感兴趣的:(elementui,表单验证)