vue antd的from表單中驗(yàn)證rules中type的坑記錄
vue antd的from表單驗(yàn)證rules中type的坑
總結(jié)在最后喲~
我的代碼如下
<a-form ref="formRef" :model="detailState" layout="horizontal" :labelCol="{ span: 6 }" :wrapperCol="{ span: 14 }" :rules="rules" > <a-form-item label="分組" name="groupId"> <a-select v-model:value="detailState.groupId"> <a-select-option v-for="item in groupsList" :key="item.id" :value="item.id" >{{ item.groupName }} </a-select-option> </a-select> </a-form-item> ... </a-from>
const detailState = reactive({ groupId: "", ... }); const rules = { groupId: [ { required: true, message: "分組必填", trigger: "change", }, ], }
明明選擇的里面有數(shù)據(jù),但是還是會(huì)校驗(yàn)出來
報(bào)錯(cuò)如下
參考官網(wǎng)中的:
// 官網(wǎng)代碼 <a-form-item label="Activity zone" name="region"> <a-select v-model:value="formState.region" placeholder="please select your zone"> <a-select-option value="shanghai">Zone one</a-select-option> <a-select-option value="beijing">Zone two</a-select-option> </a-select> </a-form-item>
// 官網(wǎng)代碼 const rules = { region: [ { required: true, message: 'Please select Activity zone', trigger: 'change', }, ], ... }
感覺并沒有什么區(qū)別,看到其他人用到了type,類型是array;我也就試了試:
const rules = { groupId: [ { required: true, message: "分組必填", trigger: "change", type: "array", }, ] }
但是依然報(bào)錯(cuò)
我想我的 groupId 定義的類型是 string ,而 type 的默認(rèn)值也是string,為什么會(huì)報(bào)錯(cuò)呢,而看別人類似的代碼,用的 array ,我把 groupId 的類型也改成數(shù)組后,還是報(bào)錯(cuò)。實(shí)在不理解…
雖然感覺到是一個(gè)小問題,但是自己就是嘗試了很多,也看了別人的,最終沒解決,最后問了大佬后,得知,這里的type
校驗(yàn)的是<a-select-option/>
中value
的值。
由于我得到的 item.id 是 number 類型,所以最后需要在 rules 中寫的 type 為 number 即可。
const rules = { groupId: [ { required: true, message: "分組必填", trigger: "change", type: "number", }, ] }
這樣就不會(huì)報(bào)錯(cuò)了。
總結(jié)
rules
中的type
校驗(yàn)的是select中得到的值,也就是value
的值,當(dāng)value為字符串時(shí),type的默認(rèn)值就為string,就可以不寫(官方的例子中就是這樣)。
當(dāng)不為string時(shí)就需要寫類型,這里就用的是number。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue-router的使用及實(shí)現(xiàn)原理
這篇文章主要介紹了關(guān)于vue-router的使用及實(shí)現(xiàn)原理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問題
這篇文章主要介紹了Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟
本篇文章給大家分享了Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟,有興趣的朋友可以跟著操作下。2018-07-07Vue必學(xué)知識(shí)點(diǎn)之forEach()的使用
在前端開發(fā)中,經(jīng)常會(huì)遇到一些通過遍歷循環(huán)來獲取想要的內(nèi)容的情形,這時(shí)候就需要用到forEach()了,下面這篇文章主要給大家介紹了關(guān)于Vue必學(xué)知識(shí)點(diǎn)之forEach()使用的相關(guān)資料,需要的朋友可以參考下2021-05-05vant如何實(shí)現(xiàn)Collapse折疊面板標(biāo)題自定義
這篇文章主要介紹了vant如何實(shí)現(xiàn)Collapse折疊面板標(biāo)題自定義,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07