如何设置el-form的model、prop属性及实现表单校验？

本文共计1188个文字，预计阅读时间需要5分钟。

目录 + el-form 的 model 属性，el-form-item 的 prop 属性，多表单校验 + Vue 的 el-form 提供了表单校验功能，:rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。组件封装。

目录

• el-form 的 model 属性
• el-from-item 的 prop 属性
• 多表单校验
• 复杂属性

Vue 的 el-form 提供了表单校验功能， :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。组件封装，让前端校验更方便。

具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。

el-form 的 model 属性

el-form 的 model 属性是用来指定表单使用的数据的，虽然 el-form 指定了 model 对象，但是，理论上，vue 并没有限制 el-input 绑定的数据，el-form 内部的 el-input 组件依然可以绑定其他数据。

需要注意的是，如果要用 rules 进行表单校验，那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性，否则会导致校验失败。