Vue 动态表单验证

最新推荐文章于 2024-12-27 08:30:00 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：开发文章标签： vue动态表单验证

本文链接：https://blog.csdn.net/M_drm/article/details/107724507

开发专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在Element UI框架中，如何通过动态生成的表单路径与验证规则实现复杂表单的验证功能。详细解释了如何使用:prop属性与rules属性匹配，以及在动态场景下如何编写validator进行手动验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心操作：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 : ""}
    }
}