易出問題的解決方案:
1,表單的ref="…“是否有添加;
2,表單的:model=”…“是否有添加;
3,表單的:rules=”…“是否有添加;
4,表單的ref=”…“和:model=”…" 是否一緻;
5,表單的FormItem的屬性prop="…“是否與輸入框(例如input)的v-moel=”…"模版名稱一緻;
vue檔案中template模闆中的寫法:
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;
}
});