iview 表單驗證的規則總結

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>
      

Node