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>

　

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

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