背景
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 的直接属性，否则会导致校验失败。
这段代码中 el-form 的 model 是 groupData，那么 el-form-item 中所有需要校验的表单的 的 model 也必须是 groupData.xxx ，即 groupData 对象的直接属性。
el-from-item 的 prop 属性
el-from-item 的 prop 属性必须与 el-input 中需要校验的表单属性一致。
要校验的表单 model 是 data.strategyName，那么 prop 的值也必须是 strategyName，否则无法正确完成校验，出现明明已经已经输入了表单值，但是还是出现校验失败的提示信息。
多表单校验
el-form-item 内部如果包含多个表单，默认校验失败时会将所有表单高亮，例如：
默认情况多表单校验
虽然只有第二个表单没有输入，但是校验失败时会同时高亮两个表单。
怎么只对第二个表单高亮呢？
解决办法是用嵌套：外层 el-form-item 是正常的信息，内层对第二个表单再次嵌套 el-form-item 指定校验属性：
每小时每日每周每月
将日期输入框包裹在新的 el-form-item 中，外层的 el-form-item 添加 requred 显示前面的红星，就可以只对该属性校验了，将第二个表单再嵌套后，校验结果就正常了：
使用嵌套只针对一个进行校验
非直接子属性的校验问题
如果待校验的表单不是 el-form 的 model 的直接子属性，而是子属性的子属性，即子属性为对象，比如这段代码：
此处校验的是 data.config.gapTime 属性，那么该怎么对其进行校验呢？
答案是， rules 中定义的该属性也必须是对象，必须保证 el-form-item 的 prop 是和表单属性一样 prop="config.gapTime" 。
rules: { config: { gapTime: [ { required: true, message: '请输入执行周期', trigger: 'blur' }, ], }, },
否则，就会出现明明已经输入了值，但是还是提示校验错误信息。
启示录
表单校验的时候，犯了几个低级错误，记录如下：
- el-form 下的 el-input 使用的数据不是 el-form 的 model 数据，导致校验失败；
- el-form 的 :rules 属性敲错了，忘记了冒号，导致传递的是个字符串；
- el-form-item 的 prop 和 el-input 表单的属性不一致导致校验失败。
表单校验还有三种常见问题：
- please transfer a valid prop path to form item 属性绑定异常如何解决？
- el-popover 中的 readonly 属性，如何进行校验？
- v-for 动态生成的表单，如何校验？
下一节将继续介绍这两个问题的解决办法。