在Vue 3中使用`el-form-item`对对象里面的值进行校验，有以下几种常见写法： ### 普通对象属性校验 当需要对普通对象的属性进行校验时，可在`el-form`上绑定`model`和`rules`，在`el-form-item`中使用`prop`指定要校验的属性。示例代码如下： ```vue <template> <el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item label="姓名" prop="visitorName"> <el-input v-model="formData.visitorName" placeholder="请输入姓名" clearable></el-input> </el-form-item> <el-form-item label="身份证号" prop="cardCode"> <el-input v-model="formData.cardCode" :maxlength="18" placeholder="请输入身份证号" clearable></el-input> </el-form-item> </el-form> </template> <script setup> import { ref } from 'vue'; const formData = ref({ visitorName: '', cardCode: '' }); const rule = ref({ visitorName: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], cardCode: [ { required: true, message: '请输入身份证号', trigger: 'blur' }, { pattern: /^\d{18}$/, message: '请输入正确的身份证号', trigger: 'blur' } ] }); const form = ref(null); </script> ``` 上述代码中，`el-form`的`model`绑定了`formData`对象，`rules`绑定了校验规则`rule`。`el-form-item`的`prop`分别指定了要校验的`visitorName`和`cardCode`属性，输入框通过`v-model`绑定对应属性值，确保了数据和校验规则的对应关系，从而实现对对象属性的校验 [^3]。 ### v-for循环中对象属性校验 在使用`v-for`循环渲染表单时，`el-form-item`的`prop`需要按照特定格式指定，其由三部分组成：`v-for`的对象、元素的`index`和下方`input`输入框`v-model`绑定的对象。示例代码如下： ```vue <template> <el-form :model="formData" :rules="rules" ref="formRef"> <el-form-item v-for="(item, index) in formData.domains" :key="index" :prop="`domains.${index}.value`"> <el-input v-model="item.value" placeholder="请输入内容"></el-input> </el-form-item> </el-form> </template> <script setup> import { ref } from 'vue'; const formData = ref({ domains: [ { value: '' }, { value: '' } ] }); const rules = ref({ domains: [ { type: 'array', defaultField: { value: [ { required: true, message: '请输入内容', trigger: 'blur' } ] } } ] }); const formRef = ref(null); </script> ``` 此代码中，`v-for`循环遍历`formData.domains`数组，`el-form-item`的`prop`动态生成，确保了每个输入框的校验规则能正确应用。同时，`rules`中对`domains`数组的每个元素的`value`属性设置了校验规则，实现了对循环中对象属性的校验 [^1]。 ### 注意事项 - 确保`el-form`的`:rules`属性有冒号，否则传递的是字符串，会导致校验失败。 - `el-form-item`的`prop`和`el-input`表单的属性必须一致，否则校验会失败。 - 若`el-form`下的`el-input`使用的数据不是`el-form`的`model`数据，也会导致校验失败 [^2]。