天天看點

iview表單驗證的規則總結

易出問題的解決方案:

1,表單的ref="…“是否有添加;

2,表單的:model=”…“是否有添加;

3,表單的:rules=”…“是否有添加;

4,表單的ref=”…“和:model=”…" 是否一緻;

5,表單的FormItem的屬性prop="…“是否與輸入框(例如input)的v-moel=”…"模版名稱一緻;

vue檔案中template模闆中的寫法:

iview表單驗證的規則總結

iview Form元件的驗證規則參數總結:

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: 空白字元->不報錯
           

舉例2:

{ type: ‘string’, whitespace:true,message:‘包含空白字元’,trigger: ‘change’}

表單送出的時候的處理驗證的方法

this.$refs[formName].validate((valid) => {
	    if (valid) { // 步驟1
	        alert('submit!');
	    } else {
	        console.log('error submit!!');
	        return false;
	    }
	 });
           

繼續閱讀