1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Vue 动态表单验证

Vue 动态表单验证

时间:2019-10-23 11:18:10

相关推荐

Vue 动态表单验证

核心操作:FormItem 的 :prop 需要与控件的 v-model 有一致的路径。

由于验证完成后需要判断值是否为空,那这个时候需要有个地方可以映射到这个值,此时:prop这个这个值对应的就是key

在固定表单需求中,通过指定 :prop,:rules 即可等到验证功能,但是对于动态生成的表单,业务逻辑来说,也就是需要动态生成 :prop 与 :rules。比如说:

<Form :model="formItem" :rules="rules"><FormItem :prop="path1.path2.path3"></FormItem></Form>

验证的写法

rules : {//一定要与 prop 值一致"path1.path2.path3" : [{required: true, message: 'xx不能为空', trigger: 'blur'}]},//这里的路径也是需要一致的,porp中的 点会分解调用的 formItem 里面的对象formItem : {path1 : {path2 : {path3 : ""}}}

以上的写法固定表单需求是可以触发验证的,但是如何需要动态增减表单对象以及验证规则,则需要编写 validator,手动验证。

源码分析

为什么 rules 中的"path1.path2.path3"可以映射到 formItem中的对象。可以打开 form-item.vue 文件

也就是如果你是动态生产的表单,只需要按照这种规范生产rules以及在formItem里面存在相同路径的都是可以调用验证

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。