Vue Element校驗(yàn)validate的實(shí)例
限制輸入指定類型
添加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具體某個(gè)值后的限制規(guī)則是個(gè)數(shù)組，可以添加多個(gè)限制。
例子：
rules: {
rewardReason: [
{ required: true, message: '請輸入加分原因', trigger: 'blur' },
{ max: 500, message: '不得超過500字符' }
]
}
限定輸入的數(shù)值介于某兩個(gè)值之間，即限定最大和最小輸入
也是通過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="請輸入等級數(shù)字" type="number"></el-input>
rules: {
rewardReason: [
{ required: true, message: '請輸入加分原因', trigger: 'blur' },
{ max: 500, message: '不得超過500字符' }
]
}
補(bǔ)充知識：vue組件庫element-ui 的validate方法
validate（）時(shí)elment-ui封裝好的用于對整個(gè)表單進(jìn)行驗(yàn)證
validate的參數(shù)是一個(gè)回調(diào)函數(shù)。該回調(diào)函數(shù)在校驗(yàn)結(jié)束后被調(diào)用，是否校驗(yàn)成功和未通過校驗(yàn)的字段。
若不傳入回調(diào)函數(shù)，則會(huì)返回以promise
參數(shù)：Function( callback : Function( boolean,obj ) )
isPass是布爾值，為true時(shí)表示校驗(yàn)通過。
調(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í)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element 實(shí)現(xiàn)商城主題開發(fā)的示例代碼
這篇文章主要介紹了vue+element 實(shí)現(xiàn)商城主題開發(fā)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
詳解vue3.2中setup語法糖<script?lang="ts"?setup>
Vue 3.2 引入了語法,這是一種稍微不那么冗長的聲明組件的方式,下面這篇文章主要介紹了詳解vue3.2中setup語法糖<script?lang="ts"setup>的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
利用vue實(shí)現(xiàn)密碼輸入框/驗(yàn)證碼輸入框
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)密碼輸入框或驗(yàn)證碼輸入框的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08
Vue2.x中利用@font-size引入字體圖標(biāo)報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇Vue2.x中利用@font-size引入字體圖標(biāo)報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
使用Vue如何寫一個(gè)雙向數(shù)據(jù)綁定(面試常見)
這篇文章主要介紹了使用Vue如何寫一個(gè)雙向數(shù)據(jù)綁定，在前端面試過程中經(jīng)常會(huì)問到，文中主要實(shí)現(xiàn)v-model，v-bind 和v-click三個(gè)命令，其他命令也可以自行補(bǔ)充。需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue data有值,但是頁面{{}} 取不到值的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue重試機(jī)制示例，重試指的是當(dāng)加載出錯(cuò)時(shí)，有能力重新發(fā)起加載組件的請求。異步組件加載失敗后的重試機(jī)制，與請求服務(wù)端接口失敗后的重試機(jī)制一樣2023-01-01
vue中使用file-saver導(dǎo)出文件的全過程記錄
這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導(dǎo)出文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vuex中store的action和mutations用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在本篇文章里小編給大家整理的是關(guān)于vue按需加載實(shí)例的相關(guān)知識點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2019-09-09