el-form表单规则验证

element 表单中当有多个模块的表单时，这时候可以使用层级的嵌套规则

HTML代码部分

<el-form
   class="mb-22"
   :model="searchParameters"
   :rules="rules"
   label-width="auto"
   ref="searchRef"
 >
   <!-- 保单信息 -->
   <div class="flex items-center pb-24">
     <div class="one-level-tit flex-1">保单信息</div>
   </div>
   <el-row :gutter="60">
     <el-col :span="spanSize">
       <el-form-item label="投保委托单号" prop="insurance.name">
         <el-input
           v-model="searchParameters.insurance.name"
           placeholder="请输入"
         ></el-input>
       </el-form-item>
     </el-col>
   </el-row>
   <el-divider border-style="double" />
   <!-- 货运险信息 -->
   <div class="flex items-center pb-24">
     <div class="one-level-tit flex-1">货运险信息</div>
   </div>
   <el-row :gutter="60">
     <el-col :span="spanSize">
       <el-form-item
         prop="cargoInsurance.name"
         label="是否需要增值税专用发票"
       >
         <el-select
           v-model="searchParameters.cargoInsurance.name"
           placeholder="请选择"
           clearable
         >
           <el-option label="是" value="true"></el-option>
           <el-option label="否" value="false"></el-option>
         </el-select>
       </el-form-item>
     </el-col>
   </el-row>
   <el-divider border-style="double" />
   <!-- 货运险标的信息 -->
   <div class="flex items-center pb-24">
     <div class="one-level-tit flex-1">货运险标的信息</div>
   </div>
   <el-row :gutter="60">
     <!-- 发票信息 -->
     <el-col :span="spanSize">
       <el-form-item label="发票编号" prop="cargoInsuranceObject.name">
         <el-input
           v-model="searchParameters.cargoInsuranceObject.name"
           placeholder="请输入"
         ></el-input>
       </el-form-item>
     </el-col>
   </el-row>
   <el-divider border-style="double" />
 </el-form>

script代码部分

const searchParameters = ref({
  insurance: {
    name: "hello",
  },
  cargoInsurance: {
    name: "hello",
  },
  cargoInsuranceObject: {
    name: "hello",
  },
});
const rules = reactive({
  insurance: {
    name: [{ required: true, message: "请输入", trigger: "change" }],
  },
  cargoInsurance: {
    name: [{ required: true, message: "请输入", trigger: "change" }],
  },
  cargoInsuranceObject: {
    name: [{ required: true, message: "请输入", trigger: "change" }],
  },
});