elementui 嵌套表单验证_vue 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'}],