elementui 嵌套表单验证_Vue elementUI 表单校验的实现代码（多层嵌套）_奈落_前端开发者...

嵌套对象的校验

项目中使用的开发，已经用了有一段时间了，感觉表单校验是每一个前端

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引一下即可。

校验效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持