Form組件提供表單驗(yàn)證的功能必指,只需要通過(guò)rules屬性傳入約定的驗(yàn)證規(guī)則,并將Form-Item的prop屬性設(shè)置為需校驗(yàn)的字段名即可塘匣。
rules中單個(gè)表單域校驗(yàn)規(guī)則可以包含多個(gè)數(shù)組脓豪,每個(gè)數(shù)組即是一條校驗(yàn)規(guī)則:
name: [
{ required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
]
數(shù)組中的單個(gè)校驗(yàn)規(guī)則對(duì)象中包含required/message/trigger/min/max等參數(shù)。
type
表明要使用驗(yàn)證器的類型忌卤,類似于數(shù)據(jù)格式校驗(yàn)扫夜,使用這個(gè),可以對(duì)一些特定的字段進(jìn)行校驗(yàn),不用像之前那樣寫正則了笤闯。
可識(shí)別的類型值有:
- string: 字符串類型(默認(rèn)值)
- number: 數(shù)字類型
- boolean:布爾類型
- method: 函數(shù)類型
- regexp:正則表達(dá)式
- integer: 整型
- float: 雙精度浮點(diǎn)型數(shù)字
- array: 數(shù)組類型
- object: 對(duì)象類型
- enum: 枚舉值
- date: 日期格式
- url: 網(wǎng)址格式
- hex: 16進(jìn)制數(shù)字
- email: 電子郵箱格式
- any: 任意類型
required
必填字段堕阔,即非空驗(yàn)證。
pattern
正則表達(dá)式颗味,如果需要驗(yàn)證手機(jī)號(hào)碼之類的超陆,可以直接編寫正則表達(dá)式配置道校驗(yàn)規(guī)則中,就不需要自己去校驗(yàn)了浦马。
{ type : "string" , required: true , pattern : /^[a-z]+$/ }
min/max
判斷數(shù)據(jù)大小范圍时呀,通常對(duì)數(shù)字大小范圍做校驗(yàn)。對(duì)于字符串和數(shù)組類型晶默,將根據(jù)長(zhǎng)度進(jìn)行比較谨娜。
{ required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
{ min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
len
長(zhǎng)度驗(yàn)證
enum
枚舉值驗(yàn)證
role: {type: "enum", enum: ['admin', 'user', 'guest']}
whitespace
驗(yàn)證是否只有空格(如果沒(méi)有該配置,則全空格的輸入也是有效的)
transform:
有時(shí)有必要在驗(yàn)證之前轉(zhuǎn)換值磺陡,以強(qiáng)制或以某種方式對(duì)其進(jìn)行清理趴梢。為此transform,向驗(yàn)證規(guī)則添加一個(gè)功能币他。在驗(yàn)證之前坞靶,先轉(zhuǎn)換屬性,然后將其重新分配給原對(duì)象蝴悉,以更改該屬性的值彰阴。
// 校驗(yàn)
transform: [
{
type: 'enum',
enum: [2,4,6],
message: `結(jié)果不存在`,
trigger: ['change', 'blur'],
transform(value) {
return Number(value * 2)
}
}
]
如上,只有輸入1辫封、2硝枉、3的時(shí)候才能校驗(yàn)通過(guò)。
貌似這個(gè)只能輔助校驗(yàn)倦微,并不能改變組件綁定變量本身的值妻味。
fields:
深層規(guī)則,可以通過(guò)將嵌套規(guī)則分配給規(guī)則的屬性來(lái)驗(yàn)證object或array類型的驗(yàn)證規(guī)則欣福,
address: {
type: "object", required: true,
fields: {
street: {type: "string", required: true},
city: {type: "string", required: true},
zip: {type: "string", required: true, len: 8, message: "invalid zip"}
}
}
roles: {
type: "array", required: true, len: 3,
fields: {
0: {type: "string", required: true},
1: {type: "string", required: true},
2: {type: "string", required: true}
}
}