Vue Element校驗(yàn)validate的實(shí)例
限制輸入指定類型
添加type限制即可，type包括以下值：
例子：
rules: {
bannerType: [ { required: true, message: '請(qǐng)選擇類型', 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" style="display: inline;" 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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
手寫(xiě)Vue源碼之?dāng)?shù)據(jù)劫持示例詳解
這篇文章主要給大家介紹了手寫(xiě)Vue源碼之?dāng)?shù)據(jù)劫持的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本篇文章主要介紹了vue.js組件化開(kāi)發(fā)實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
詳解基于vue的移動(dòng)web app頁(yè)面緩存解決方案
這篇文章主要介紹了詳解基于vue的移動(dòng)web app頁(yè)面緩存解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
vue3+ts+pinia+vant項(xiàng)目搭建詳細(xì)步驟
最近公司想重構(gòu)一個(gè)項(xiàng)目,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue3+ts+pinia+vant項(xiàng)目搭建的詳細(xì)步驟,文中通過(guò)圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue中如何實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼
本文主要介紹了Vue中如何實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue中的echarts實(shí)現(xiàn)寬度自適應(yīng)的解決方案
這篇文章主要介紹了vue中的echarts實(shí)現(xiàn)寬度自適應(yīng),本文給大家分享實(shí)現(xiàn)方案，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
element-ui封裝一個(gè)Table模板組件的示例
這篇文章主要介紹了element-ui封裝一個(gè)Table模板組件的示例，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下2021-01-01
vue-next/runtime-core 源碼閱讀指南詳解
這篇文章主要介紹了vue-next/runtime-core 源碼閱讀指南詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue 接口請(qǐng)求地址前綴本地開(kāi)發(fā)和線上開(kāi)發(fā)設(shè)置方式
這篇文章主要介紹了vue 接口請(qǐng)求地址前綴本地開(kāi)發(fā)和線上開(kāi)發(fā)設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08