Element UI 的
表单数据多层
校验通常通过递归和深度监听 (deep watch) 来实现，特别是当数据结构嵌套较深的时候。你可以使用 `el-form` 和其提供的验证规则功能，以及自定义验证函数。下面是一个简单的步骤：
1. **设置
表单**: 首先，你需要在 `el-form` 中声明各层级的数据，并使用 `v-model` 绑定到组件实例的属性上。
```html
<el-form :model="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<!-- 更
深层的数据，假设有个地址 -->
<div v-for="(address, index) in form.addresses" :key="index">
<el-form-item label="地址" prop="addresses[{{ index }}].street">
<el-input v-model="form.addresses[index].street"></el-input>
</el-form-item>
</div>
</el-form>
```
2. **配置验证规则**: 对于每个嵌套字段，可以编写一个验证规则。例如，对地址进行
校验时，可以用 `validateAddress` 函数。
```js
data() {
return {
form: {
name: '',
addresses: [
{ street: '' },
// 其他地址...
]
}
},
rules: {
name: { required: true, message: '请输入姓名', trigger: 'blur' },
'addresses[].street': {
required: true,
message: '请输入街道',
validator: validateAddress
}
}
}
methods: {
validateAddress(value) {
// 自定义的复杂
校验逻辑，比如检查格式、长度等
}
}
```
3. **深度监听** 或者使用 `el-form` 提供的 `watch` 和 `validate` 方法，可以监听并验证所有层级的数据变化。如果需要实时验证，可以在更改嵌套数据时手动触发验证。
4. **提交
表单前的最终验证**: 使用 `beforeValidate` 或 `validate()` 方法，在用户点击提交按钮前进行全面的
校验。
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
