element form二级对象验证

element form二级对象验证
Element Form二级对象验证
Element Form是一款基于Vue.js的表单组件，提供了丰富的表单验证方式，能够满足各种复杂表单的需求。

其中，二级对象验证是其一个重要的验证方式。

二级对象验证是指在表单中存在嵌套对象时，需要对嵌套对象内的属性进行验证。

例如，一个用户信息表单包含了一个地址对象，需要对地址对象的省份、城市、街道等属性进行验证。

在Element Form中，二级对象验证可以通过prop属性的方式进行配置。

例如，对于一个用户信息表单的地址对象，可以如下配置：```html
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="省份" prop="address.province">
<el-input v-model="form.address.province"></el-input> </el-form-item>
<el-form-item label="城市" prop="address.city">
<el-input v-model="form.address.city"></el-input>
</el-form-item>
<el-form-item label="街道" prop="address.street">
<el-input v-model="form.address.street"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
address: {
province: '',
city: '',
street: ''
}
},
rules: {
'address.province': [
{ required: true, message: '请选择省份', trigger: 'change' }
],
'address.city': [
{ required: true, message: '请选择城市', trigger:
'change' }
],
'address.street': [
{ required: true, message: '请输入街道', trigger: 'blur' }
]
}
}
}
}
</script>
```
在上述代码中，通过prop属性将地址对象的省份、城市、街道属性与验证规则进行了绑定。

其中，'address.province'、'address.city'、'address.street'是prop属性的值，代表了嵌套对象的属性路径。

每个属性路径都对应了一个验证规则数组，数组中包含了该属性需要进行的验证规则。

在表单提交时，Element Form会自动根据prop属性的值，对每个二级对象进行验证。

如果验证不通过，会自动在表单项下方显示错误提示信息。

同时，也可以通过this.$refs.form.validate()方法手动触发表单验证。

总结
二级对象验证是Element Form中的一种重要的表单验证方式。

通过prop属性的方式，可以对嵌套对象内的属性进行验证，并且在验证不通过时显示错误提示信息。

在实际开发中，可以根据具体需求进行灵活的配置，满足各种复杂表单的验证需求。