elementUI表单上传文件验证

一、目标效果

        使用elementUI进行表单校验的时候，只能校验输入框、下拉选择列表等内容，就是没看到可以校验文件上传，这意味着你需要手动实现！目标效果如下：

        总而言之，就是这样的效果：（1） 不点击复选框，点击提交，可以通过校验；（2）点击复选框，不上传文件，校验不通过；（3）点击复选框，上传文件，提示字样消失，且校验通过；（4）点击复选框，显示必传的样式显示，不点击复选框，则不提示红点；

二、踩坑记录

        1、在form-item中需要填写prop，还需要在data中填写rules，并且prop的值与rules对应的规则相一致，不然起不到校验效果。

 

 

        2、自定义规则的时候，不写callback，则校验不生效

 

        3、此处会用到动态设置校验，很多人第一反应就是动态设置prop，即这样书写：

:prop=” 条件? '自己定义的rules下的规则' ? ' '  “

            3.1 这样的prop不生效，要写成:prop=” 条件? '自己定义的rules下的规则' ? 'empty'  “

                3.1.1 这样写还是有问题，万一以后自己在rules下定义的规则为empty呢，所以最佳做法不要动态设置prop，将prop写死，在规则校验器里面校验。

 

        4、el-upload的 action="https://jsonplaceholder.typicode.com/posts/" ，上传文件时会报跨域错误，且有时候报503错误。跨域的问题可以通过谷歌浏览器插件 

Allow CORS: Access-Control-Allow-Origin0.1.5  得到解决；其实在真实项目中，action后面跟的是后端的地址，这两个问题都自然迎刃而解。

 

        5、红点的生成采用动态绑定类名实现：

:class="条件？’is-required‘ ：’ ‘ "

 

        6、通过 this.$refs.refName.clearValidate(prop值) 去清空校验提示字样

三、代码实现