发布时间:2023-04-24 文章分类:WEB开发, 电脑百科 投稿人:李佳 字号: 默认 | | 超大 打印

- 前言

这几天在做uni-app表单验证时遇到了一个问题,按官方文档给出的方法,当需要数据校验时,只需要
1.为uni-forms中的"modelValue"数据设置“:rules”对应
2.“uni-forms-item”的name和“uni-easyinput”中“v-model”中的key和“rules”中的key相同
就可以对该项“uni-easyinput”做数据校验了。
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案

这一步很多人看官方文档就能够写好,并没有其他问题。

- 问题

问题在于,formsData不可能只是一层对象,这里面很可能是对象包对象,也就是“多级结构对象数据”(如图所示),此时,按上面的校验方法,当“uni-easyinput”后面有很多级时,name就不知道如何写了,rules也没有可以参照的方法。
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案

如果你再按下图这样写,那name是找不到rules中与之对应的key的,也就是说数据校验无效,你无论输入框中怎么写内容,依然会提示“请输入内容”。
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案
*

这里要说一句,uni-app的uni-ui和elementUI完全没办法比,问题无比的多,而且功能都不完全,网上教程又少,真的太难用了。

- 解决方案

在全网搜索很久后,最后在该组件下面看到了作者对类型问题的提问,在作者的推荐下,尝试使用开发文档中提到的“动态表单校验”来完整该需求。
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案
这里“动态表单校验”的大概意思是,单独给“uni-forms-item”写一个规则,将name以数组方式写,把后面多个key组合在数组中,写出来就是这样的。

<uni-forms-item label="购入渠道" name="buyWay" required :rules="[{'required': true,errorMessage: '该项必填'}]"
:name="['buyInfo','buyWay']">
<uni-easyinput v-model="commodity.buyInfo.buyWay" placeholder="">
</uni-easyinput>
</uni-forms-item>

附上对应图片(如下图所示)关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案
这样就不需要在到“uni-forms”中的rules中为该项写规则了,因为该项单独有了校验规则。
其他地方没有改变。至此,就可以正常校验了。

没有输入数据时

关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案

输入数据后关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案