type :
string: 必須是字串型別。這是預設型別

number: 必須是數字

boolean: 必須是布林型的

method:必須是型別函式

regexp: 必須是ReGEXP的例項，或者是在建立新的ReGEXP時不會生成異常的字串

integer:必須是整數.

float:必須是浮點數.

array: 必須是由Array.isArray確定的陣列

object: 必須是型別物件而不是Array.isArray

enum: 列舉中必須存在值。

date: 按日期確定的值必須有效

url: 必須是URL型別。

hex: 必須是十六進位制。

email:必須是電子郵件型別。

required:true | false

pattern :正則表示式

min: 最小值

max: 最大值

Length : 長度

enum: 驗證欄位是否存在其中

{ message:'不包含a , u, g',trigger: 'change',type: 'enum',enum: ['a', 'u', 'g']}

messages: 錯誤資訊

trigger : ‘change’ | ‘blur’

whitespace : true | false
　　true:空白字元 ->錯誤提醒
　　false: 空白字元->不報錯

驗證數字踩坑

表單校驗，單獨進行數字校驗，使用下面的程式碼是可以的

{ type: 'number', message: '請輸入排序', trigger: 'blur' }

但同時進行數字和為空校驗，使用下面的程式碼是不行的，輸入數字的時候一直提示不能為空

{ required: true, message: '排序不能為空', trigger: 'blur' },
 { type: 'number', message: '請輸入排序', trigger: 'blur' }

能夠成功驗證的方法：

const validateSequence = (rule, value, callback) => {
      let regNum = /^.{1,5}$/;
      if (value === '') {
            callback(new Error('輸入排序(升序)'));
      } else if (!Number.isInteger(+value)) {
            callback(new Error('輸入數字'));
      } else if (!regNum.test(value)) {
            callback(new Error('長度過長'));
      } else {
            callback();
      }
};

ruleData: {
      sequence: [
            { required: true, validator: validateSequence, trigger: 'blur' }
      ]
}

iview進行表單驗證時間日期驗證失敗的問題：

和下拉框一樣，日期的型別是data

ruleValidate: {
   advance:[
           { required: true, message: '預送達時間不能為空', trigger: 'change' ,type: 'date'},
        ],
      }  

iview進行多重驗證的寫法：

多重驗證包括第一要驗不能為空，第二要驗證限制的一些長度，寫正則表示式等

ruleValidate: {
   goodsNum: [
     { required: true, message: '數量不能為空', trigger: 'blur' },
     { type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'數量應為正浮點數且不超過9999.99', trigger:'blur'},
   ],
}

有時在Select選項需要給個預設選項時，必須在data中傳入string型別，如果是number則無法預設選中。

<Form-item label="個人/企業標識" prop="personalOrEnterprise">
                  <Select v-model="personalOrEnterprise" placeholder="請選擇" :disabled="checkEnterprise">
                                <Option value="1">個人</Option>
                                <Option value="2">企業</Option>
                  </Select>
</Form-item>

data() {
  return {
     personalOrEnterprise: '1'  //預設為個人
  }
}

記錄踩過的坑

input 預設輸入為String型別
如果在表單驗證中宣告 type：number，建議input中加上number屬性，將使用者的輸入自動轉換為 Number 型別。

select 單選多選
提示： 單選返回的是一個項，而多選返回的是陣列。

dataPicker v-model失效
必須on-change返回並賦值才能實現資料繫結，否則:value無法捕捉日期的而選擇變動。

8.iview表單必填的標誌顯示
使用iview自定義表單校驗時，對於v-if顯示狀態的修改會影響的顯示

使用v-if設定在新增是密碼欄位顯示，編輯時不顯示
這時校驗規則已完成，設定只有辦公電話不是必填項
切換到編輯時，密碼欄位消失，但是辦公電話前會出現*

<FormItem v-if="modalType===0" label="密碼" prop="password">
<Input type="password" v-model="userForm.password" autocomplete="off"/>
</FormItem>

將v-if修改為v-show，可以解決這個問題

v-if只有在條件成立時才會生成dom
v-show是先生成dom，再通過css控制顯示隱藏