iview表單驗證問題 Select驗證必填失敗,以及表單物件巢狀陣列驗證方法

囧囧圖圖發表於2018-07-12
View物件巢狀陣列

iview的 Select下拉框的時候,資料驗證必填,明明選擇了資料,卻一直提示驗證不能通過

1, 問題顯示如下圖

iview表單驗證問題 Select驗證必填失敗,以及表單物件巢狀陣列驗證方法

  • html程式碼
<Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100">
    <FormItem label="客戶分類：" prop="typeId">
        <Select v-model="FormData.typeId" placeholder="請選擇" style="width:40%;">
            <Option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </Option>
        </Select>
    </FormItem>
</Form>
複製程式碼
  • 獲取資料格式如下
 typeList: any = [
    {
      id: 1,
      name: 'stringa'
    },
    {
      id: 2,
      name: 'stringb'
    }
  ]
複製程式碼
  • 驗證規則程式碼如下
ruleValidate: any = {
   typeId: [
      { required: true, message: '請選擇客戶分類', trigger: 'change' }
   ]
}
複製程式碼

檢視iview的文件規,發現iview預設校驗資料型別為String，而我的select用的id是number型別的,所以校驗新增type型別,所以最後驗證程式碼應該寫成下面這種

ruleValidate: any = {
   typeId: [
      { required: true, type: 'number', message: '請選擇客戶分類', trigger: 'change' }
   ]
}
複製程式碼

備註:這個問題只針對動態獲取的資料,下面這兩種格式驗證沒有這個問題

 value=1
 
 value="1"

這樣不加type驗證規則,也是可以通過的
複製程式碼
<FormItem label="客戶分類：" prop="typeId">
    <Select v-model="FormData.typeId" placeholder="請選擇" style="width:40%;">
      <Option value="1">選項1</Option>
      <Option value="2">選項2</Option>
    </Select>
  </FormItem>
  <FormItem label="客戶分類：" prop="typeId">
    <Select v-model="FormData.typeId" placeholder="請選擇" style="width:40%;">
      <Option value=1>選項1</Option>
      <Option value=2>選項2</Option>
    </Select>
</FormItem>
複製程式碼

相關文章