原文地址:https://blog.csdn.net/ztx114/article/details/92806695
參考文檔： https://github.com/yiminghe/async-validator
1. 支持的基本類型
<FormItem
prop="UserId"
:rules=" [
{ required: true, message: '請選擇一項', trigger: 'change',type:'number',min:1},
]"
>
<Select v-model="formAddOrder.UserId" filterable @on-change="selectUser">
<Option v-for="(item,index) in userList" :value="item.UserId" :label="item.name" :key="index" >
<span>{{item.name}}</span>
</Option>
</Select>
</FormItem>
1
2
3
4
5
6
7
8
9
10
11
12
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']}
1
messages: 錯誤信息
trigger : ‘change’ | ‘blur’
whitespace : true | false
true:空白字符 ->錯誤提醒
false: 空白字符->不報錯
{ type: 'string', whitespace:true,message:'包含空白字符',trigger: 'change'}
1
2. 驗證數字踩坑
表單校驗，單獨進行數字校驗，使用下面的代碼是可以的
{ type: 'number', message: '請輸入排序', trigger: 'blur' }
1
但同時進行數字和為空校驗，使用下面的代碼是不行的，輸入數字的時候一直提示不能為空
{ required: true, message: '排序不能為空', trigger: 'blur' },
{ type: 'number', message: '請輸入排序', trigger: 'blur' }
1
2
能夠成功驗證的方法：
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();
}
};
1
2
3
4
5
6
7
8
9
10
11
12
ruleData: {
sequence: [
{ required: true, validator: validateSequence, trigger: 'blur' }
]
}
1
2
3
4
5
3.view進行表單驗證select時候驗證失敗的問題：
用iview自帶的表單驗證select標簽的時候，一直驗證不通過，因為iview默認校驗數據類型為String，而我的select用的value是number類型的
ruleValidate: {
customer:[
{ required: true, message: '客戶名稱不能為空', trigger: 'blur',type:'number'},
],
}
1
2
3
4
5
4.iview進行表單驗證時間日期驗證失敗的問題：
和下拉框一樣，日期的類型是data
ruleValidate: {
advance:[
{ required: true, message: '預送達時間不能為空', trigger: 'change' ,type: 'date'},
],
}
1
2
3
4
5
5.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'},
],
}
1
2
3
4
5
6
6. 有時在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>
1
2
3
4
5
6
data() {
return {
personalOrEnterprise: '1' //默認為個人
}
}
1
2
3
4
5
7.記錄踩過的坑
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>
1
2
3
將v-if修改為v-show，可以解決這個問題
v-if只有在條件成立時才會生成dom
v-show是先生成dom，再通過css控制顯示隱藏