当前位置：首页 > web >正文

el-form表单规则验证

web 2025/8/7 13:05:50

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

HTML代码部分

<el-formclass="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-inputv-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-itemprop="cargoInsurance.name"label="是否需要增值税专用发票"><el-selectv-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-inputv-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" }],},
});