vue antd的from表單中驗證rules中type的坑記錄

更新時間：2023年04月21日 14:24:12 作者：檸檬檸檬子

這篇文章主要介紹了vue antd的from表單中驗證rules中type的坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue antd的from表單驗證rules中type的坑

總結在最后喲~

我的代碼如下

 <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ù)，但是還是會校驗出來

報錯如下

參考官網(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",
        },
      ]
}

但是依然報錯

我想我的 groupId 定義的類型是 string ，而 type 的默認值也是string，為什么會報錯呢，而看別人類似的代碼，用的 array ，我把 groupId 的類型也改成數(shù)組后，還是報錯。實在不理解…

雖然感覺到是一個小問題，但是自己就是嘗試了很多，也看了別人的，最終沒解決，最后問了大佬后，得知，這里的type校驗的是<a-select-option/>中value的值。

由于我得到的 item.id 是 number 類型，所以最后需要在 rules 中寫的 type 為 number 即可。

 const rules = {
      groupId: [
        {
          required: true,
          message: "分組必填",
          trigger: "change",
          type: "number",
        },
      ]
 }

這樣就不會報錯了。