form表单设置了rules，但是发现虽然页面有了红色星号的验证提示，但实际上当失去焦点的时候并未触发校验。form表单验证失败问题

上代码，看结构：

<div class="bodyInfo_ctn">
           //子元素一
            <div
              v-if="
                curBtnType === 'readImage' ||
                (curNode.nodeName !== '本次' && curBtnType !== 'saveDiscussion')
              "
            >
              <el-form ref="readimageform" label-width="140px" label-position="left">
                <el-form-item label="主诉、体征：">{{
                  curFilmData.medicalHistory
                }}</el-form-item>
                <el-form-item label="X线/CT/MRI诊断：">{{
                  curFilmData.imageDiagnosis
                }}</el-form-item>
                <el-form-item label="检验/其它检查：">{{
                  curFilmData.examinationData
                }}</el-form-item>
                <el-form-item label="手术记录：">{{
                  curFilmData.surgicalRecords
                }}</el-form-item>
                <el-form-item label="病理表现:">{{
                  curFilmData.clinicDiagnosis
                }}</el-form-item>
                <el-form-item label="附件:"></el-form-item>
                <el-form-item label="备注:">{{
                  curFilmData.remark
                }}</el-form-item>
                <el-form-item label="部位:">
                  <el-button
                    type="text"
                    @click="showpart"
                    v-if="!partVsb"
                    >详情</el-button
                  >
                  <div v-if="partVsb">
                    {{ curFilmData.bodyDiagnosis.text }}
                  </div>
                </el-form-item>
                <el-form-item label="诊断:">
                  <el-button
                    type="text"
                    @click="showDiagnose"
                    v-if="!diagnoseVsb"
                    >详情</el-button
                  >
                  <div v-if="diagnoseVsb">
                    {{ getDianosis(curFilmData.diagnosis) }}
                  </div>
                </el-form-item>
                <el-form-item label="是否确诊:">{{
                  isTure(curFilmData.diagnosisFlag)
                }}</el-form-item>
                <el-form-item label="是否典型:">{{
                  isTure(curFilmData.typicalCaseFlag)
                }}</el-form-item>
                <el-form-item label="是否疑难:">{{
                  isTure(curFilmData.difficultCaseFlag)
                }}</el-form-item>
                <el-form-item label="是否定性符合:">{{
                  isTure(curFilmData.qualitativeFit)
                }}</el-form-item>
                <el-form-item label="是否定位符合:">{{
                  isTure(curFilmData.locationFit)
                }}</el-form-item>
                <template v-if="curNode.nodeName !== '本次'">
                  <el-form-item label="读片人:">{{
                    curFilmData.userName
                  }}</el-form-item>
                  <el-form-item label="主持人:">{{
                    curFilmData.hostUserName
                  }}</el-form-item>
                  <el-form-item label="参与人:">{{
                    getParticipant(curFilmData.participantName)
                  }}</el-form-item>
                  <el-form-item label="读片时间:">{{
                    curFilmData.readTime
                  }}</el-form-item>
                </template>
              </el-form>
            </div>

            //子元素二
            <div
              v-if="
                showEditPartList.includes(curBtnType) &&
                curNode.nodeName == '本次'
              "
            >
              <el-form ref="editform" :model="curFilmData" :rules="rules" label-width="140px" label-position="left">
                <el-form-item label="主诉、体征：" prop="medicalHistory">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="curFilmData.medicalHistory"
                    @blur="handleMedicalBlur"
                  ></el-input>
                </el-form-item>
                <el-form-item label="X线/CT/MRI诊断：" prop="imageDiagnosis" >
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="curFilmData.imageDiagnosis"
                  ></el-input>
                </el-form-item>
                <el-form-item label="检验/其它检查：">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="curFilmData.examinationData"
                  ></el-input>
                </el-form-item>
                <el-form-item label="手术记录：">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="curFilmData.surgicalRecords"
                  ></el-input>
                </el-form-item>
                <el-form-item label="病理表现:">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="curFilmData.clinicDiagnosis"
                  ></el-input>
                </el-form-item>
                <el-form-item label="备注:">
                  <el-input
                    type="textarea"
                    :rows="6"
                    v-model="curFilmData.remark"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
  </div>

<script>
data(){
    return {
        rules: {
            medicalHistory: [
              { required: true, message: "请填写主诉、体征", trigger: "blur" },
            ],
            imageDiagnosis: [
              { required: true, message: "请填写X线/CT/MRI诊断", trigger: "blur" },
            ],
      },
    }
}
</script>

可见：类名为bodyInfo_ctn的div下有两个div子元素（两个div内均有el-form表单），分别使用v-if去判断显示form表单的。

那么我们只给“子元素一”下的form表单加了两项表单验证，但是发现我们将这两项清空并且失焦时，却没有触发表单校验，只有label的红色星号，但是没有进行实际的表单验证并提示,见下图：

 

 

于是查阅资料，参考：

vue elementUI组件表单动态验证失效的问题与解决办法_vue项目中写的验证码失效怎么办-CSDN博客 

大概意思就是说，有相同父元素的子元素，如果v-if和v-else的元素类型相同，最好使用key属性绑定每个子元素。 

那么更新代码如下：表单验证可以成功生效，并且元素一的警告提示也没有了。

参考链接中写了两种方式，比较懒，我只参考了比较简单的一种。 大家可以试试参考链接中的第二种方式。