相信搜索这个问题的兄弟会看到这个链接vueelementui表单验证,但是这篇文章的验证规则确实存在一些问题,然后我尝试在自己的验证下总结一下元素形式验证的基本规则是怎么写的。表单内部项的绑定校验主要依赖于prop和rules。设置一个模型,然后根据这个模型写下窗体里面的prop路径。表单的顶层可以选择绑定一个规则。如果绑定的话,表单内部的items可以根据prop自动找到常用的对象。表单的顶层规则是rules,在rules中写了foo的校验规则,那么prop只需要写foo就可以运行嵌套对象了。如图,formitem对应data2.obj.arr循环中每一项的cc,此时value校验prop需要带上循环的index。如图所示,窗体的顶层模型为data2.obj,需要从data2.obj下的第一个数组开始写prop,即:prop="'arr.'+index+'.cc'",此时各个表格的规则是一样的,可以选择和上图一样的。这样这个valueRule会对应到arr循环出来的每一个表单项,也可以如下图在整个表单对应的验证规则中添加,但是这时候必须写所有arr.0.ccarr.1.cc到arr的长度,建议单独定义一条规则。这次最终的嵌套对象是一个非常复杂的对象。如果我们按照上面链接中的老哥,我们需要再创建一个窗体来嵌套到窗体中。提交前做两个检查。但其实只要一层层往下写,图中经过两次循环的数据只要写arr.0.aa.0.dd.zz就可以验证,所以实际上,元素form验证的规则只需要一个分配到特定位置的porp和一个声明验证方法的规则对象。也可以这样写,或者两者都可以达到验证的效果。区别仅在于验证时间。打印出来的路径不一样,但是都说明了表单项验证到哪个位置,哪个变量,根据这个来验证,如果表单项只为这个项添加规则,那么props会按照这个规则进行验证。只需指定表单项数据与表单模型的相对位置即可。
