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