?2016-2026 Matools All rights reserved,
粵ICP備17059708號(hào)
element-ui的表單驗(yàn)證主要分三部分:
* validate
* options
* rules
最常用的是rules.
定義rule可以有三種形式:
* 函數(shù)： { name(rule, value, callback, source, options) {} }
* 對(duì)象： { name: { type: 'string', required: true } }
* 數(shù)組： { name: [{ type: 'string' }, { required: true }] }
函數(shù)的方式我自己也沒有學(xué)會(huì),暫時(shí)不說(shuō)了.對(duì)象和數(shù)組的方式比較簡(jiǎn)單,也比常用.數(shù)組的方式,其實(shí)就是對(duì)象的方式的組合.
element-ui有定義好了很多的默認(rèn)規(guī)則,并且還可以使用默認(rèn)規(guī)則里的validator進(jìn)行擴(kuò)展自定義.
默認(rèn)規(guī)則:
* type: 數(shù)據(jù)的類型,默認(rèn)的type見"默認(rèn)type"一節(jié)
* required： 是否必填,true or false
* pattern：使用正則來(lái)驗(yàn)證
* min: 數(shù)據(jù)的長(zhǎng)度的最小值 (數(shù)據(jù)類型必須是string或array)
* max: 數(shù)據(jù)的長(zhǎng)度的最大值 (數(shù)據(jù)類型必須是string或array)
* len: 數(shù)據(jù)的長(zhǎng)度必須等于這個(gè)值 (數(shù)據(jù)類型必須是string或array)
* enum: 數(shù)據(jù)的值必須等于這個(gè)枚舉數(shù)組某個(gè)元素 { enum: [a, b, c] },注意需要type設(shè)置為enum
* transform: 一個(gè)鉤子函數(shù)，在開始驗(yàn)證之前可以對(duì)數(shù)據(jù)先處理后驗(yàn)證，如吧number轉(zhuǎn)為string后再驗(yàn)證
* message: 報(bào)錯(cuò)的提示信息,可以是字符串也可以是jsx標(biāo)簽Name is required
* validator: 自定義驗(yàn)證函數(shù)以及報(bào)錯(cuò)信息 validator_name(rule, value, callback)
默認(rèn)的type(對(duì)應(yīng)默認(rèn)規(guī)則的type部分取值):
* string：String類型，type默認(rèn)的取值
* number：Number類型，如果后臺(tái)返回的數(shù)據(jù)是字符串，可以用transform轉(zhuǎn)為Number類型
* boolean: Boolean類型
* method: 必須是Function
* regexp：必須是正則RegExp
* integer：是Number類型的正整數(shù)
* float: 是Number類型的浮點(diǎn)數(shù)
* array: 是Array.isArray通過的數(shù)組
* object: Array.isArray不通過的Object類型
* enum: 先定義enum，值必須是enum枚舉數(shù)組某個(gè)元素
* date: Date對(duì)象的實(shí)例
* url: String類型且符合鏈接格式
* hex: Hex類型(十六進(jìn)制)
* email: String類型且符合郵箱格式
示例一,對(duì)象形式:
<el-form :model="addForm" label-width="80px" ref="addForm"> <el-form-item
label="列表標(biāo)題" prop="title" :rules="{ required: true, min:2, max:128, message:
'親,至少要輸入兩個(gè)字', trigger: 'blur' }"> <el-input placeholder="請(qǐng)輸入列表標(biāo)題"
v-model="addForm.title"></el-input> </el-form-item> </el-form> data() { return
{ addForm: { title: '' } } }
示例二,數(shù)組形式:
<el-form :model="addForm" label-width="80px" ref="addForm"> <el-form-item
label="列表標(biāo)題" prop="title" :rules="[ {required: true, message: '親,必須要輸入點(diǎn)東西',
trigger: 'blur'}, {min:2, max:128,message: '親,至少輸入兩個(gè)字;最多不超過128個(gè)字', trigger:
'blur'} ]"> <el-input placeholder="請(qǐng)輸入列表標(biāo)題" v-model="addForm.title"></el-input>
</el-form-item> </el-form>
示例三,自定義驗(yàn)證函數(shù):
<el-form :model="addForm" label-width="80px" ref="addForm"> <el-form-item
label="年齡" :prop="age" :rules="{ validator: rule_age,trigger: 'blur' }">
<el-input placeholder="請(qǐng)輸入年齡" v-model="addForm.age"
auto-complete="off"></el-input> </el-form-item> </el-form> .... // 年齡校驗(yàn)方法
rule_age(rule,value,callback) { // 0如果是合法值,需要單獨(dú)判斷,否則會(huì)被!value作為真 if (value ===
0) { return callback() } if (!value) { return callback(new Error('請(qǐng)輸入年齡')); };
let n = Number(value); if (n < 1) { return callback(new Error('年齡不能小于1歲')); }
else if (n > 200) { return callback(new Error('年齡不能大于200歲')); }; callback(); },
... // 提交,$refs.addForm 對(duì)應(yīng)ref="addForm" submit() {
this.$refs.addForm.validate((valid) => { if (valid) { console.log("驗(yàn)證通過") }
else { console.log("驗(yàn)證不通過") return false }
熱門工具 換一換