iview Form 表單驗證小結

手頭的項目有一個需求是創建自定義表單模板，深入使用了iview的Form控件，踩了不少iview的坑，同時也鍛鍊了validate相關的能力。

---

• 基本知識

Form由一些FomeItem組成，可以爲Form設置rule來指定相關表單項的限制條件。
通過$ref 可以訪問到 Form 組件，調用 validate 函數，即可獲取相應的校驗函數。iview中，Form驗證是根據FormItem的prop屬性來驗證。
在編寫校驗函數前，首先需要了解表單驗證相關知識，參看iview組件中使用的異步表單驗證插件 async-validator

• validate function(source, [options], callback)
  即function( 驗證對象（必須）, 驗證選項（可選）, 回調函數（必須）)
• rule function(rule, value, callback, source, options)
• type 驗證類型的限制，默認爲string，全類型type如圖
  
  一個栗子：

const validateNameList = (rule, value, callback) => {
    if (value.length === 0) {
        callback(new Error('請選擇name'));
    } else {
        callback();
    }
};
validateAdvancedFormItem: {
  // 對於單個字段來說，通常需要多個驗證規則，這些規則以數組展示
  name: [
    { required: true, message: '任務名稱不能爲空', trigger: 'blur' },
    { type: 'string', max: 20, message: '不能超過20個字符', trigger: 'blur' },
  ],
  nameList: [
    { required: true, type: 'array', message: '請選擇nameList', trigger: 'blur' },
    { validator: validateBusiness, trigger: 'blur' },
  ]
  endTimeVal: [
    { required: true, type: 'date', message: '請選擇結束時間', trigger: 'change' }
  ],
  
  noVerify:[{ required: true, validator: noVerify }], // 自帶的驗證器不能滿足要求時，需要我們自定義驗證器
},

• 記錄踩過的坑

  1. input 默認輸入爲String類型
     如果在表單驗證中聲明 type：number，建議input中加上number屬性，將用戶的輸入自動轉換爲 Number 類型。
  2. select 單選多選
     提示： 單選返回的是一個項，而多選返回的是數組。
  3. dataPicker v-model失效
     必須on-change返回並賦值才能實現數據綁定，否則:value無法捕捉日期的而選擇變動。