vue elementUI 表单校验(多层嵌套)//终极版

longshibagithub

相信搜索这个问题的兄弟萌都会看到这个链接
vue elementui表单校验
但是这篇文章的校验规则编写实际上是实际上存在一些问题的,然后在我自己的验证下试图总结一哈element表单的校验到底应该怎么写

基础规则
表单内部项绑定校验主要靠prop和rules,porp指明地址,rules声明规则
表单顶层需要绑定一个model,此后表单内部的prop路径均基于这个model往下写。
表单顶层可以选择绑定一个rules,绑定了的话表单内部项可以根据prop自动查找

普通对象

image.png
image.png
这是一个普通的位于多层对象嵌套下的表单,这时表单顶层的model是data2.obj,对应的表单顶层规则是rules,rules里面写了foo的校验规则,那么prop只需要写上foo就彳亍了

嵌套对象

image.png
image.png
如图表单项对应的是data2.obj.arr循环的每一项的cc的值
这时候校验prop需要带上循环的index,如图所示,表单顶层model是data2.obj,prop需要从data2.obj下的第一个数组开始写,即
:prop="'arr.'+index+'.cc'"
这样的形式,这时每个表单的规则是一样的,你可以选择像上图一样。这样这个valueRule会对应到每个arr循环出来的表单项下面
也可以像下图一样
image.png
在整个表单对应的校验规则里添加,不过此时你必须要全部写上

arr.0.cc
arr.1.cc
直至arr的长度
建议还是单独定义一条规则

究极嵌套对象

image.png
image.png
这次是一个非常复杂的对象,如果是按照上面链接里面那个老哥的说法的话我们是需要再创建一个表单来嵌套到表单里面,提交前要做两次校验。但是实际上只要按照一层一层往下写就彳亍了
图中这个经过两次循环的数据其实只要这样写
arr.0.aa.0.dd.zz
就能校验了,所以其实element表单校验的rules需要的只是一个指定到具体位置的porp和一个声明校验方法的rule对象就彳亍了
你也可以这样写
image.png
或者这样写
image.png
两者都能达到校验的效果
区别只在于校验时打印的路径长得不一样,但是都指明了这个表单项校验得是哪个位置得哪个变量
image.png

总结

表单顶层绑定了model和rules的,表单项添加了prop且prop能在顶层rules里面找到就会按照这个来校验,表单项添加了仅针对这一项的rules则会按照这个rules来校验
props只要指定表单项数据到表单model的相对位置就彳亍了

阅读 2.1k
3 声望
0 粉丝
0 条评论
你知道吗?

3 声望
0 粉丝
宣传栏