el-form-item,form深层对象校验
时间: 2023-12-14 09:31:54 浏览: 165
el-form-item是Element UI中的表单组件,用于包装表单中的每个表单项。在表单中,我们可能需要对深层对象进行校验,这时候可以使用自定义校验规则来实现。
以下是一个示例代码,演示了如何对深层对象进行校验:
```html
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="详细地址" prop="detail.address">
<el-input v-model="form.detail.address"></el-input>
</el-form-item>
<el-form-item label="邮编" prop="detail.zip">
<el-input v-model.number="form.detail.zip"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: '',
address: '',
detail: {
address: '',
zip: ''
}
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值' }
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' }
],
'detail.address': [
{ required: true, message: '请输入详细地址', trigger: 'blur' }
],
'detail.zip': [
{ required: true, message: '请输入邮编', trigger: 'blur' },
{ type: 'number', message: '邮编必须为数字值' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
alert('校验通过')
} else {
alert('校验失败')
return false
}
})
}
}
}
</script>
```
在上述代码中,我们使用了prop属性来指定表单项对应的数据模型属性,使用rules属性来指定校验规则。对于深层对象,我们可以使用点号来指定属性路径,例如'detail.address'表示form对象中的detail属性的address属性。
阅读全文