欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue antd的from表單中驗(yàn)證rules中type的坑記錄

 更新時(shí)間:2023年04月21日 14:24:12   作者:檸檬檸檬子  
這篇文章主要介紹了vue antd的from表單中驗(yàn)證rules中type的坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)原理

    這篇文章主要介紹了關(guān)于vue-router的使用及實(shí)現(xiàn)原理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問題

    Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問題

    這篇文章主要介紹了Vue中的@blur事件 當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟

    Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟

    本篇文章給大家分享了Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟,有興趣的朋友可以跟著操作下。
    2018-07-07
  • vue封裝組件之上傳圖片組件

    vue封裝組件之上傳圖片組件

    這篇文章主要為大家詳細(xì)介紹了vue封裝組件之上傳圖片組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • Vue組件之間數(shù)據(jù)共享淺析

    Vue組件之間數(shù)據(jù)共享淺析

    本文章向大家介紹vue組件中的數(shù)據(jù)共享,主要包括vue組件中的數(shù)據(jù)共享使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng),具有一定的參考價(jià)值,需要的朋友可以參考一下
    2022-11-11
  • VUE3頁面div如何點(diǎn)擊改變樣式

    VUE3頁面div如何點(diǎn)擊改變樣式

    這篇文章主要介紹了VUE3頁面div如何點(diǎn)擊改變樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue必學(xué)知識(shí)點(diǎn)之forEach()的使用

    Vue必學(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-05
  • vant如何實(shí)現(xiàn)Collapse折疊面板標(biāo)題自定義

    vant如何實(shí)現(xiàn)Collapse折疊面板標(biāo)題自定義

    這篇文章主要介紹了vant如何實(shí)現(xiàn)Collapse折疊面板標(biāo)題自定義,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法

    vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法

    這篇文章主要介紹了vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue-router:嵌套路由的使用方法

    vue-router:嵌套路由的使用方法

    本篇文章主要介紹了vue-router:嵌套路由的使用方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-02-02

最新評(píng)論