Vue Element校驗validate的實例
限制輸入指定類型
添加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" style="display: inline;" placeholder="請輸入等級數(shù)字" type="number"></el-input>
rules: {
rewardReason: [
{ required: true, message: '請輸入加分原因', trigger: 'blur' },
{ max: 500, message: '不得超過500字符' }
]
}
補充知識：vue組件庫element-ui 的validate方法
validate（）時elment-ui封裝好的用于對整個表單進行驗證
validate的參數(shù)是一個回調(diào)函數(shù)。該回調(diào)函數(shù)在校驗結(jié)束后被調(diào)用，是否校驗成功和未通過校驗的字段。
若不傳入回調(diào)函數(shù)，則會返回以promise
參數(shù)：Function( callback : Function( boolean,obj ) )
isPass是布爾值，為true時表示校驗通過。
調(diào)用validate()校驗時，需要prop屬性綁定校驗項的字段名，如上圖所示。
如果prop屬性不綁定name這個字段名，表單校驗時，不會校驗變量ruleForm.name 的值。
以上這篇Vue Element校驗validate的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
手寫Vue源碼之?dāng)?shù)據(jù)劫持示例詳解
這篇文章主要給大家介紹了手寫Vue源碼之?dāng)?shù)據(jù)劫持的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本篇文章主要介紹了vue.js組件化開發(fā)實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要介紹了詳解基于vue的移動web app頁面緩存解決方案，非常具有實用價值，需要的朋友可以參考下2017-08-08
最近公司想重構(gòu)一個項目,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue3+ts+pinia+vant項目搭建的詳細步驟,文中通過圖文及代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
本文主要介紹了Vue中如何實現(xiàn)動態(tài)路由的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue中的echarts實現(xiàn)寬度自適應(yīng)的解決方案
這篇文章主要介紹了vue中的echarts實現(xiàn)寬度自適應(yīng),本文給大家分享實現(xiàn)方案，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了element-ui封裝一個Table模板組件的示例，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下2021-01-01
vue-next/runtime-core 源碼閱讀指南詳解
這篇文章主要介紹了vue-next/runtime-core 源碼閱讀指南詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue 接口請求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式
這篇文章主要介紹了vue 接口請求地址前綴本地開發(fā)和線上開發(fā)設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08