iview表單驗證問題 Select驗證必填失敗,以及表單對象嵌套數組驗證方法

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

1, 問題顯示以下圖

• 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>
複製代碼

• 若有問題,歡迎指正

• 本文爲原創,如需轉載,請註明出處: iview表單驗證問題 Select驗證必填失敗,以及表單對象嵌套數組驗證方法