vue实现提交时对不同板块的表单内容进行校验

需求

1、需要对第一个红色框框板块内所有带星号的地方进行校验，并将提示语显示到对应的输入框下面，如图：

2、第二个红色框框板块中，点击 “添加相关人员” 能实现对多人的添加功能，并且能绑定相对应的校验规则
3、在第二个红色框框板块中，对所有红色星号进行指定规则校验，如下图：

代码

    <!-- 添加或修改出勤信息 -->
    <el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body >
        <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
          <el-col :span="6">
            <el-form-item label="出行类型" prop="carPlanType" >
              <el-select v-model="form.carPlanType" placeholder="请选择出行类型" :style="{width: '100%'}" @change="changeDataFromPlanType" :disabled="form.id != null">
                <el-option v-for="(item,index) in carPlanTypeData.carPlanTypeOptions" :key="index" :label="item.label"
                  :value="item.label" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18" v-if="form.carPlanType=='非生产出行'">
            <el-form-item label="项目名称" prop="projectName" >
              <el-input v-model="form.projectName" placeholder="请输入项目名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.carPlanType !='非生产出行'">
            <el-form-item label="项目名称" prop="projectName" >
              <el-select v-model="form.projectName" placeholder="请选择项目名称"  clearable filterable remote :remote-method="getProjectOptions" :loading="projectLoading" @change="changeProjectCode"
                :style="{width: '100%'}">
                <el-option v-for="item in projectOptions" :key="item.projectId" :label="item.projectCode +'-'+ item.projectName +'-'+ item.projectLeader"
                  :value="item" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.carPlanType !='非生产出行'">
            <el-form-item label="项目编号" prop="projectCode" >
              <span style="color: red;">{
  { form.projectCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起码里程" prop="startMileage">
              <el-input-number v-model="form.startMileage" placeholder="起码里程" @change="handleMileageChange" controls-position=right>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出发日期" prop="setOutDay"