elementui表单验证图片

项目中有遇到表单验证的页面，

image.png

image.png

一行里面怎么做两个验证呢，我想了一下就添加了一个<el-form-item></el-form-item>，label设为空，我们上传图片是用原生写的，怎么样才能让他在上传图片之后下面的提示直接消失呢，我在下面加了一个<el-input/>标签，绑定我们需要验证的值，修改css样式当我们点击上传的时候触发<el-input/>失去焦点的事件，
上代码

 <el-form-item label="上传身份证件" prop="manageidFront">
                        <div style="display: flex">
                          <div class="certificate_bg" @mouseenter="moveIn('manageidFront')" @mouseleave="moveLeave('manageidFront')">
                            <img src="../../assets/img/business/error.png" alt="" class="filepath_del" @click="delFile('manageidFront')" v-if="manageidFront">
                            <img class="filepathImg" v-if="form.manageidFront" :src="form.manageidFront" alt="">
                            <img src="../../assets/img/business/certificate_back.png" alt="" style="margin: 10px 0" v-else>
                            <input type="file" v-if="!form.manageidFront" class="filepath" @change="changepic($event,'manageidFront')" accept="image/jpg,image/jpeg,image/png,image/PNG">
                            <span @click="uploadImg('manageidFront')" v-if="!form.manageidFront" class=" chose_file">选择文件</span>
                            <div class="preview" @click="previewFile('manageidFront')" v-if="manageidFront">预览</div>

                            <el-input v-model="form.manageidFront" type="textarea" style="margin-top: -15px;opacity: 0"></el-input>
                          </div>
                          <div class="id_back">
                            <el-form-item label="" prop="manageidBack">
                          <div class="certificate_bg"  @mouseenter="moveIn('manageidBack')" @mouseleave="moveLeave('manageidBack')">
                            <img src="../../assets/img/business/error.png" alt="" class="filepath_del" @click="delFile('manageidBack')" v-if="manageidBack">
                            <img class="filepathImg" v-if="form.manageidBack" :src="form.manageidBack" alt="">
                            <img src="../../assets/img/business/certificate_back.png" alt="" style="margin: 10px 0" v-else>
                            <input type="file"  v-if="!form.manageidBack" class="filepath" @change="changepic($event,'manageidBack')" accept="image/jpg,image/jpeg,image/png,image/PNG">
                            <span @click="uploadImg('manageidBack')" v-if="!form.manageidBack" class=" chose_file">选择文件</span>
                            <div class="preview" @click="previewFile('manageidBack')"  v-if="manageidBack">预览</div>
                            <el-input v-model="form.manageidBack" type="textarea" style="margin-top: -15px;opacity: 0"></el-input>
                          </div>
                            </el-form-item>
                          </div>
                        </div>
                      </el-form-item>

rules里面这样写

manageidFront:[ {required: true, message: '请上传身份证人像面', trigger: 'change'},],
manageidBack:[ {required: true, message: '请上传身份证国徽面', trigger: 'change'},]

css样式

 .certificate_bg{
    width:100px;
    height:100px;
    background:rgba(242,242,242,1);
    margin-right: 30px;
    position: relative;
  }
  .filepathImg{
    width: 100%;
    height: 80%;
  }
 .filepath{
    position: absolute;
    z-index: 20;
    width: 100px;
    height: 50px;
    background: #00a8ff;
    opacity: 0;
    bottom: 0;
    left: 0;
  }

我这样做效果是实现了，但是绝对不是最好的方法