elementui-plus 深度表单数据校验

### Element Plus 中实现深度表单数据校验 在 Element Plus 中，对于复杂结构的表单（如嵌套对象），可以通过自定义验证规则来实现深度表单数据校验。这不仅限于简单的字符串或数值类型的输入框，还包括数组、对象等形式更为复杂的字段。 #### 定义表单模型与初始值 为了处理深层次的对象结构，在初始化 `data` 属性时应构建相应的层次关系： ```javascript const formData = reactive({ user: { name: '', address: { city: '', street: '' } }, }); ``` #### 设置验证规则 针对上述多层次的数据结构，可以在 `rules` 配置项里为每一层设定具体的验证条件。特别是当遇到像地址这样的子级项目时，需指明完整的路径以便框架能够准确定位到待检验的部分[^1]。 ```javascript const rules = ref({ 'user.name': [ { required: true, message: '请输入用户名', trigger: 'blur' } ], 'user.address.city': [ { required: true, message: '请选择城市', trigger: 'change' } ], 'user.address.street': [ { required: true, message: '请填写街道名称', trigger: 'blur' } ] }) ``` #### 表单模板编写 在 HTML 模板部分，则要确保每一个 `<el-form-item>` 的 `prop` 值能正确反映其对应的完整键路径，这样才能让验证逻辑生效并显示恰当的信息给用户查看。 ```html <el-form :model="formData" :rules="rules"> <!-- 用户名 --> <el-form-item label="用户名" prop="user.name"> <el-input v-model="formData.user.name"></el-input> </el-form-item> <!-- 地址信息 --> <div style="margin-left: 20px;"> <span>地址：</span><br/> <!-- 城市选择器 --> <el-form-item label="" prop="user.address.city"> <el-select v-model="formData.user.address.city" placeholder="请选择城市"> <el-option label="北京" value="beijing"></el-option> <el-option label="上海" value="shanghai"></el-option> </el-select> </el-form-item> <!-- 街道输入框 --> <el-form-item label="" prop="user.address.street"> <el-input v-model="formData.user.address.street" placeholder="请输入街道"></el-input> </el-form-item> </div> </el-form> ``` 通过这种方式，即使面对较为复杂的表单设计也能轻松应对，并且保持良好的用户体验和严格的输入控制。