Vue Element校驗(yàn)validate的實(shí)例
官方文檔
限制輸入指定類(lèi)型
添加type限制即可,type包括以下值:
例子:
rules: { bannerType: [ { required: true, message: ’請(qǐng)選擇類(lèi)型’, trigger: ’change’} ], associateId: [ { required: true, message: ’請(qǐng)選擇公告’, trigger: ’change’} ], associateData: [ { required: true, type: ’url’, message: ’輸入合法的鏈接’, trigger: ’change’ } ]}
限定輸入字符串的長(zhǎng)度
用min和max加以限制,element validate具體某個(gè)值后的限制規(guī)則是個(gè)數(shù)組,可以添加多個(gè)限制。
例子:
rules: { rewardReason: [ { required: true, message: ’請(qǐng)輸入加分原因’, trigger: ’blur’ }, { max: 500, message: ’不得超過(guò)500字符’ } ]}
限定輸入的數(shù)值介于某兩個(gè)值之間,即限定最大和最小輸入
也是通過(guò)min和max限定的,但是發(fā)現(xiàn)直接用不行,查了下輸入的時(shí)候el-input的v-model要加.number限制,即v-model.number。例子:
<el-input v-model.number='form.rewardToLevel' placeholder='請(qǐng)輸入等級(jí)數(shù)字' type='number'></el-input> rules: { rewardReason: [ { required: true, message: ’請(qǐng)輸入加分原因’, trigger: ’blur’ }, { max: 500, message: ’不得超過(guò)500字符’ } ]}
補(bǔ)充知識(shí):vue組件庫(kù)element-ui 的validate方法
validate()時(shí)elment-ui封裝好的用于對(duì)整個(gè)表單進(jìn)行驗(yàn)證
validate的參數(shù)是一個(gè)回調(diào)函數(shù)。該回調(diào)函數(shù)在校驗(yàn)結(jié)束后被調(diào)用,是否校驗(yàn)成功和未通過(guò)校驗(yàn)的字段。
若不傳入回調(diào)函數(shù),則會(huì)返回以promise
參數(shù):Function( callback : Function( boolean,obj ) )

isPass是布爾值,為true時(shí)表示校驗(yàn)通過(guò)。

調(diào)用validate()校驗(yàn)時(shí),需要prop屬性綁定校驗(yàn)項(xiàng)的字段名,如上圖所示。
如果prop屬性不綁定name這個(gè)字段名,表單校驗(yàn)時(shí),不會(huì)校驗(yàn)變量ruleForm.name 的值。
以上這篇Vue Element校驗(yàn)validate的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:

網(wǎng)公網(wǎng)安備