- 前言
這幾天在做uni-app表單驗(yàn)證時(shí)遇到了一個(gè)問(wèn)題，按官方文檔給出的方法，當(dāng)需要數(shù)據(jù)校驗(yàn)時(shí)，只需要
1.為uni-forms中的"modelValue"數(shù)據(jù)設(shè)置“:rules”對(duì)應(yīng)
2.“uni-forms-item”的name和“uni-easyinput”中“v-model”中的key和“rules”中的key相同
就可以對(duì)該項(xiàng)“uni-easyinput”做數(shù)據(jù)校驗(yàn)了。
這一步很多人看官方文檔就能夠?qū)懞?，并沒(méi)有其他問(wèn)題。
- 問(wèn)題
問(wèn)題在于，formsData不可能只是一層對(duì)象，這里面很可能是對(duì)象包對(duì)象，也就是“多級(jí)結(jié)構(gòu)對(duì)象數(shù)據(jù)”（如圖所示），此時(shí)，按上面的校驗(yàn)方法，當(dāng)“uni-easyinput”后面有很多級(jí)時(shí)，name就不知道如何寫(xiě)了，rules也沒(méi)有可以參照的方法。
如果你再按下圖這樣寫(xiě)，那name是找不到rules中與之對(duì)應(yīng)的key的，也就是說(shuō)數(shù)據(jù)校驗(yàn)無(wú)效，你無(wú)論輸入框中怎么寫(xiě)內(nèi)容，依然會(huì)提示“請(qǐng)輸入內(nèi)容”。
*
這里要說(shuō)一句，uni-app的uni-ui和elementUI完全沒(méi)辦法比，問(wèn)題無(wú)比的多，而且功能都不完全，網(wǎng)上教程又少，真的太難用了。
- 解決方案
在全網(wǎng)搜索很久后，最后在該組件下面看到了作者對(duì)類(lèi)型問(wèn)題的提問(wèn)，在作者的推薦下，嘗試使用開(kāi)發(fā)文檔中提到的“動(dòng)態(tài)表單校驗(yàn)”來(lái)完整該需求。
這里“動(dòng)態(tài)表單校驗(yàn)”的大概意思是，單獨(dú)給“uni-forms-item”寫(xiě)一個(gè)規(guī)則，將name以數(shù)組方式寫(xiě)，把后面多個(gè)key組合在數(shù)組中，寫(xiě)出來(lái)就是這樣的。
<uni-forms-item label="購(gòu)入渠道" name="buyWay" required :rules="[{'required': true,errorMessage: '該項(xiàng)必填'}]"
:name="['buyInfo','buyWay']">
<uni-easyinput v-model="commodity.buyInfo.buyWay" placeholder="">
</uni-easyinput>
</uni-forms-item>
附上對(duì)應(yīng)圖片（如下圖所示）
這樣就不需要在到“uni-forms”中的rules中為該項(xiàng)寫(xiě)規(guī)則了，因?yàn)樵擁?xiàng)單獨(dú)有了校驗(yàn)規(guī)則。
其他地方?jīng)]有改變。至此，就可以正常校驗(yàn)了。
沒(méi)有輸入數(shù)據(jù)時(shí)
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-407572.html
輸入數(shù)據(jù)后
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-407572.html
到了這里，關(guān)于關(guān)于uni-app中uni-forms表單驗(yàn)證時(shí)“多級(jí)結(jié)構(gòu)對(duì)象數(shù)據(jù)”如何做數(shù)據(jù)校驗(yàn)的解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
