结伴游项目（关于图片的表单验证）

2018-06-16

由于element里的表单验证对于图片这方面不太好处理，自己加了个验证，具体方法如下：

在图片下方加一行v-show的提示信息。当用户上传图片，el-upload的成功回调函数会将图片的url传到表单里的img参数中，当点击提交时，需要验证img里是否为空，为空则会显示提示信息，当用户上传了图片之后，将把v-show参数置为false消除提示信息。

<p class="red-word" v-show="imageRequiredWord">请上传图片</p>
//method方法：
handleAvatarSuccess(res, file) {
    this.form.imageUrl = res.msg;
    this.imageRequiredWord=false;
  },
submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid && this.form.imageUrl) {
      ……
        })
      }else if(!this.form.imageUrl){
        this.imageRequiredWord=true;
        return false;
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  },

但是这样有一个小问题，就是图片前面的必填提示号会消失，因为是自定义的验证，要显示这个号我是依然使用了原始的验证方法，但是将提示信息置为了空。尴尬的是，这样在最后提交表单时会显示验证失败，可能跟element的验证机制有关，无法验证图片是否上传。

发现我的目的只是想显示红色的*号而已，而网上查找后了解到el-form的label是可以用slot来插入的，即

<el-form-item>
      <span slot="label"><span class="red-word">*</span> 照片</span>

这样就可以。