官方文檔

限制輸入指定類(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)。