嵌套对象的校验
项目中使用的开发,已经用了有一段时间了,感觉表单校验是每一个前端
elementUI对表单的校验有自己的方法,要求传入model的必须为一个对象。但如果数据结构比较复杂,对象里面又嵌套
example
提交
data () {
return {
formData:{
name: '',
password: '',
user: {
tel: ''
},
phones: [
{ brand: "华为", model: "", arr: [{ data1: "" }] },
{ brand: "小米", model: "", arr: [{ data1: "" }] }
]
},
formRule:{
name: [{required: true, message: '不能为空', trigger: 'blur'},
{pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
password: [{required: true, message: '不能为空', trigger: 'blur'},
{validator: Verify.validatePassword, trigger: 'blur'},
],
'user.tel' : [{required: true, message: '手机号码不能为空', trigger: 'blur'}],
'phones[0].model': [{required: true, message: 'model不能为空', trigger: 'blur'}],
},
}
},
methods: {
handleSubmit(){
const t = this;
t.$refs['formData'].validate((valid) => {
if(valid){
console.log(this.formData);
}
})
}
}
校验方法
model绑定的formData中内层user也是一个
对于子对象里面又嵌套数组的数据结构,如果想校验数组里的元素,需要在写一层form,用子对象作为新form表单再重新走一遍流程即可,具体例子请看上面的代码
对于验证规则,可以通过pattern或者validator来实现,pattern里面可以直接写正则表达式,不知道为啥文档中没有提到这点。之前的验证一般都是通过validator来实现的,验证方法单独写在一个文件中,这样可以做到整个项目公用,用到时只需通过import引一下即可。
校验效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持