关于element表单多层表单验证与动态验证的一些使用体会，仅个人记录，不建议参考

表单验证是用的比较多的了，前几天也有记录了关于element表单多层验证的坑，今天又踩了一下，才发现前几天的记录用处不大，对于表单验证也是一知半解，所以今天再次记录一下，估摸着有半桶水的水准了，听起来叮当响。

一. 关于 el-form 的 :model 和 v-model

v-model 和 :model 其实不是同一个东西，
v-model，是进行数据双向绑定的，:model是element用来进行表单验证的。
不管你的文本框v-model绑定了什么值，但假如说你没有在表单上:model来绑定验证的数据对象或者绑定了其他数据对象的话，就可能会出现下面这种情况（哪怕表单里面有数据，但是却还是输入验证不通过）。

另外再提一嘴：假如prop没写对的话，也会有这个问题，其实原理都是一样的，因为表单验证的时候，它去找了:model 的对象，再去找对象下prop上填写的 属性，这两个但凡有一个填错了就有可能找不到对应的那项属性数据，找不到当然就报“请选择品牌”这样的验证为空警告了。

还有一种情况，那就是上面:model 没错，prop 也没错，但是:model 的对象在初始化的时候并没有prop的那个属性，vue没有响应式监听到的话，也会出现上面的情况。
看不懂再往下看看，下面解释比较详细。

二. 关于rules

rules 可以在 el-form中绑定，也可以在 el-form-item 中绑定

el-form中绑定

el-form-item 中绑定

其实，在这两个地方绑定的rules并没有太大的区别，之所以在el-form-item中去绑定，只是因为我之前方案的那一块是可以动态增删的，所以把v-for循环绑定的rules抽了出来而已，哪怕我有一百个方案，但是方案名称的rules我只写一次就够了。

而且如果你是在el-form-item上绑定的rules的话，那么你的名字可以随便乱来，只要你:rules的时候对应上就好了，比如案例名称schemeName，你完全可以把验证规则的属性写成abc，然后绑定rules.abc。当然为了统一，最好还是保持一致=。=

三.关于prop

上图的prop我有特别标记出来，因为这里需要注意一下。
比较重点的东西来了0.0

我写的不是 schemeName，而是oneModule.schemeName
这其实需要联系上文第一条的:model来解释，也是表单验证多层嵌套对象的一个关键点。
重新贴一下图先，免得页面滚来滚去


在el-form上，我写的 :model=“moduleData”，如果el-form表单进行验证的话，就会去找muduleData这个对象。
然后prop里面写的，其实就是你表单元素，在moduleData里面是啥地位。
如果是moduleData.name，那你的prop填 name 就足够了。
如果是moduleData.oneModule.name，那么你的prop就填 oneModule.name
如果是moduleData.oneModule.aaa.bbb，那么你的prop就填 oneModule.aaa.bbb
如果是moduleData.oneModule[0].aaa.bbb 那么你的prop就填 oneModule[0].aaa.bbb，当然涉及到数组一般都是v-for循环，所以更可能是以 `oneModule[${index}].aaa.bbb`的形式填进去。

以上应该就是一般常见的多层结构嵌套的表单验证了，记住，表单验证只跟你 :model 的那个对象、你的rule、你的prop有关系，跟你v-model的那个东西。。关系不大，事情得一码归一码。。

四.特别情况

最开始的时候还提到过一种情况，那就是
在el-form上，我写的 :model=“moduleData”，绑定的是moduleData.startTime，prop 填的是 startTime
绑定都没错，也填了数据，但还是出现了验证提示。
那可能是你的moduleData 初始化的时候，并没有存在 startTime 这个属性。
比如你是这样初始化的。 this.moduleData = {}
然后又是通过这种方式赋值的 this.moduleData.startTime = '2021-12-06'
这种情况可能vue没有办法响应监听到startTime 属性的变化，所以也会报错。

解决方案：

this.moduleData = { startTime:''}
或者
this.$set(this.moduleData,'startTime','2021-12-06')

五.最后

在element的表单验证上踩了各种乱七八糟的坑，所以记录一下当个总结，仅作个人记录。（也是为了以后面试的时候面试官问我有没有写过文章的时候，我能一副可把我牛逼坏了的姿态去叉会腰。）。

注：仅为个人记录，参考。。请慎重，不要一个敢写一个敢抄，谢谢阅读。