官方文檔

限制輸入指定類型

添加type限制即可，type包括以下值：

例子：

rules: { bannerType: [ { required: true, message: ’請選擇類型’, trigger: ’change’} ], associateId: [ { required: true, message: ’請選擇公告’, trigger: ’change’} ], associateData: [ { required: true, type: ’url’, message: ’輸入合法的鏈接’, trigger: ’change’ } ]}

限定輸入字符串的長度

用min和max加以限制，element validate具體某個值后的限制規(guī)則是個數(shù)組，可以添加多個限制。

例子：

rules: { rewardReason: [ { required: true, message: ’請輸入加分原因’, trigger: ’blur’ }, { max: 500, message: ’不得超過500字符’ } ]}

限定輸入的數(shù)值介于某兩個值之間，即限定最大和最小輸入

也是通過min和max限定的，但是發(fā)現(xiàn)直接用不行，查了下輸入的時候el-input的v-model要加.number限制，即v-model.number。例子：

<el-input v-model.number='form.rewardToLevel' placeholder='請輸入等級數(shù)字' type='number'></el-input> rules: { rewardReason: [ { required: true, message: ’請輸入加分原因’, trigger: ’blur’ }, { max: 500, message: ’不得超過500字符’ } ]}

補(bǔ)充知識：vue組件庫element-ui 的validate方法

validate（）時elment-ui封裝好的用于對整個表單進(jìn)行驗(yàn)證

validate的參數(shù)是一個回調(diào)函數(shù)。該回調(diào)函數(shù)在校驗(yàn)結(jié)束后被調(diào)用，是否校驗(yàn)成功和未通過校驗(yàn)的字段。

若不傳入回調(diào)函數(shù)，則會返回以promise

參數(shù)：Function( callback : Function( boolean,obj ) )

isPass是布爾值，為true時表示校驗(yàn)通過。

調(diào)用validate()校驗(yàn)時，需要prop屬性綁定校驗(yàn)項(xiàng)的字段名，如上圖所示。

如果prop屬性不綁定name這個字段名，表單校驗(yàn)時，不會校驗(yàn)變量ruleForm.name 的值。

以上這篇Vue Element校驗(yàn)validate的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。