一、目标效果

        使用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值) 去清空校验提示字样

三、代码实现

<template>
  <div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="活动名称:" :class="showFlag ? 'is-required' : ''" prop="file">
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-remove="handleRemove"
          :on-success="uploadSuccess">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="必上传文件:">
        <input type="checkbox" v-model="showFlag" @change="handleCheckBoxChange" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    // 文件上传校验规则
    const fileMustUpload = (rule, value, callback) => {
      if (this.showFlag && this.file == null) {
        // 未上传文件
        callback("请上传文件");
      }
      callback();
    }
    
    return {
      showFlag: false,    //判断红点是否显示，与复选框的值绑定在一起
      ruleForm: {
        file: null    //接受文件值
      },
      rules: {
        file: [
            //自定义校验器
          { validator: fileMustUpload, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 文件移除事件监听
    handleRemove() {
      this.file = null;
    },

    // 提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('上传成功!');
        }
      });
    },

    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    uploadSuccess(file) {
      this.clearFileUploadValidate();
      this.file = file
    },

    // 清空文件上传校验 
    clearFileUploadValidate() {
      this.$refs.ruleForm.clearValidate('file');
    },

    // 监听复选框值的变化
    handleCheckBoxChange(event) {
      // 复选框的值绑定给showFlag，并用它来控制红点必填样式
      this.showFlag = event.target.checked;
      if (!this.showFlag) {
        this.clearFileUploadValidate();
      }
    }
  },

}
</script>

<style>
.el-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#app {
  height: 100%;
}
</style>