vue form表单验证 同一项中包含多个子项

form表单中碰到这种要求上传多张图片，但是只显示一个标签的情况：

---

• 先用一个大的FormItem展示标签，内部再写两个小的FormItem分别代表两张图片，同时为这两张图片配置表单验证规则
• 用css手动给大的FormItem标签画一个 * ，提示用户该项为必填项

完整代码：

<Form :model="form" :rules="rules" ref="formRule">
    <FormItem label="证件照:" class="identify-picture">
      <div style="display:flex;">
            <FormItem prop="positive" class="positive-item">
                <el-upload 
                     class="positive-upload"
                     action="#" 
                     :show-file-list="false"
                     :before-upload="(file) => handleBeforeUpload(file, 'positive')"
                >
                     <img v-if="image1" :src="image1" class="positive-style">
                </el-upload>
                <h3>点击上传带头像一面</h3>
            </FormItem>
            <FormItem prop="back" class="back-item">
                <el-upload
                     class="back-upload"
                     action="#"
                     :show-file-list="false"
                     :before-upload="(file) => handleBeforeUpload(file, 'back')"
                >
                     <img v-if="image2" :src="image2" class="back-style">
                </el-upload>
                <h3>点击上传带国徽一面</h3>
            </FormItem>
     </div>
    </FormItem>
</Form>


data(){
    return{
        form:{
            positive: null,
            back: null
        },
        formRule:{
            positive:[
                { required: true, type:'object', message: '请上传证件照带头像一面', trigger: 'change' }],
            back:[
                { required: true, type:'object', message: '请上传证件照带国徽一面', trigger: 'change' }]
        }
    }
}

<style>
// 手动绘制大标签前面的红色 "*"
.identify-picture::before{
     position: absolute;
     top: 10px;
     left: 33px;
     content:'*';
     display: inline-block;
     margin-right: 4px;
     line-height: 1;
     font-family: SimSun;
     font-size: 12px;
     color: #ed4014;
}
</style>

 拓展：form表单校验上传图片成功后，提示文字不消失