Vue如何使用ElementUI對表單元素進(jìn)行自定義校驗及踩坑
前言
在使用ElementUI的表單元素時候,除了做一些簡單的非空處理校驗,在一些特殊的場合,還需要我們做一些自定義校驗。
其實ElementUI不僅提供了基本的非空校驗,也對我們提供了自定義檢驗。
在使用的時候還是遇到了一些坑,下面簡單的總結(jié)分享下
非空校驗
知道自定義校驗之前,需要知道基本的非空校驗
如下圖,ElementUI已經(jīng)幫助我們創(chuàng)建好了一個簡單的demo,我們直接拿來用即可。
這里我也是直接復(fù)制的demo,然后根據(jù)自己需求進(jìn)行修改。
簡單的說下相關(guān)的一些地方吧
一個表單包含著很多頁面元素,根據(jù)自己的需求使用不同的組件去拼接即可:
表單的元素我們可以直接在data生成一個表單數(shù)據(jù),把里面的屬性都放在數(shù)據(jù)里面,這樣可以直接把這個表單傳到后臺進(jìn)行交互。不然一個一個傳也太麻煩了
然后就是檢驗(rules),這里一般做對表單元素校驗的處理
除了手機(jī)號,密碼,確認(rèn)密碼這三項,我都是只做了最基本的非空校驗。
我們可以注意到,每一個表單元素都有一個紅色的星號,這就是必輸項的一個標(biāo)識,我們主要通過這個屬性控制:
required: true
比如我現(xiàn)在把用戶名的required: true去掉
頁面上的非空校驗就沒了,所以不論你校驗寫的再好,不加這個屬性就等于沒用。
自定義校驗
我主要以兩個較為經(jīng)典的例子舉例,一個是手機(jī)號的格式,一個是密碼和確認(rèn)密碼的判斷是否相同
關(guān)于表單的自定義校驗ElementUI也給了demo,就是我的第二個例子
大家都知道,手機(jī)號都是有一定的規(guī)則的,不是只有11位數(shù)字就是這么簡單的,還要以固定格式開頭等。
定義自定義校驗函數(shù)
針對這種格式,我們就可以使用自定義校驗了,我們可以在data中定義自定義校驗:
可以理解成把它理解成一個變量,有著自定義的回調(diào)函數(shù)進(jìn)行自定義錯誤提示
可以看到首先是判斷輸入的手機(jī)號是否為空,如果為空給出的提示是:請輸入手機(jī)號碼
如果輸入的手機(jī)號不為空,那么就通過正則表達(dá)式判斷是否合法,如果不合法的話,同樣給出對應(yīng)的提示信息,這便是自定義校驗,根據(jù)自己的需求定義自己的規(guī)則。
// 校驗手機(jī)號是否合法 var checkPhone = (rule, value, callback) => { if (value === "") { callback(new Error("請輸入手機(jī)號碼")) } else if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) { callback(new Error("手機(jī)號格式有誤,請輸入正確的手機(jī)號碼")) } else { callback() } };
使用自定義校驗函數(shù)
使用起來也很簡單,在原有的表單校驗基礎(chǔ)上加上validator屬性,值就是定義自定義函數(shù)的變量名
注意:使用了自定義校驗函數(shù)之后,就不要在這里寫message提示信息了。直接在函數(shù)里面定義錯誤信息即可。
phone: [ { required: true,validator: checkPhone, trigger: 'blur' }],
兩次密碼是否相同這個demo直接拿著ElementUI給的demo即可。這里不再贅述
總結(jié)
通過表單自定義校驗,大大提高了靈活性和可控性。個人還是比較喜歡的
到此這篇關(guān)于Vue如何使用ElementUI對表單元素進(jìn)行自定義校驗及踩坑的文章就介紹到這了,更多相關(guān)Vue用ElementUI對表單自定義校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log
console.log一般都是在開發(fā)環(huán)境下使用的,在生產(chǎn)環(huán)境下需要去除?,本文主要介紹了vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log,具有一定的參考價值,感興趣的可以了解一下2024-05-05vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06vue3+element Plus如何實現(xiàn)彈框的拖拽、可點擊底層頁面功能
這篇文章主要介紹了vue3+element Plus如何實現(xiàn)彈框的拖拽、可點擊底層頁面功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11詳解Vue的watch中的immediate與watch是什么意思
這篇文章主要介紹了詳解Vue的watch中的immediate與watch是什么意思,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12結(jié)合el-upload組件實現(xiàn)大文件分片上傳功能
Element UI的el-upload上傳組件相信各位小伙伴都已經(jīng)非常熟悉,最近接了一個新需求,要求在el-upload組件基礎(chǔ)上實現(xiàn)分片上傳功能,即小于等于5M文件正常上傳,大于5M文件切成5M每片上傳,那么這個功能怎么實現(xiàn)呢?一起看看吧2022-09-09