element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無(wú)”的情況校驗(yàn)通過(guò)(示例代碼)
element的表單校驗(yàn)證件號(hào)規(guī)則以及輸入“無(wú)”的情況校驗(yàn)通過(guò)
<el-col :span="6"> <el-form-item label="證件號(hào)碼" prop="Idnumber" class="grid-content bg-purple"> <el-input v-model="testForm.Idnumber" placeholder="請(qǐng)輸入證件號(hào)碼" @change="changeIdnumber"></el-input> </el-form-item> </el-col>
使用方法對(duì)校驗(yàn)數(shù)據(jù)進(jìn)行過(guò)濾判斷
data(){ let CrdtNoValidar=(rule,value,callback)=>{ if(value&&this.testForm.idtype=="001"){ if(value=="無(wú)"){ callback(); return } let reg18=/^[1-9]\[d]{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; let reg15=/^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/; if(reg18.test(value)||reg15.test(value)){ callback() }else{ callback(new Error("請(qǐng)輸入有效的身份證號(hào)碼!")) } }else{ callback() } }; return{ rules:{ Idnumber:[{required:false,message:'請(qǐng)輸入證件號(hào)碼',trigger:'blur'},{validator:CrdtNoValidar,trigger:'blur'}], }, } }
輸入一個(gè)異常的證件號(hào)碼進(jìn)行校驗(yàn)
輸入一個(gè)正常的證件號(hào)碼進(jìn)行校驗(yàn)
輸入漢字“無(wú)”進(jìn)行校驗(yàn)
到此這篇關(guān)于element的表單校驗(yàn)證件號(hào)規(guī)則以及輸入“無(wú)”的情況校驗(yàn)通過(guò)的文章就介紹到這了,更多相關(guān)element表單校驗(yàn)證件號(hào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)舉例詳解
- ElementPlus表單rules校驗(yàn)的方法步驟
- Vue Element UI 表單自定義校驗(yàn)規(guī)則及使用
- Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑
- element表單使用校驗(yàn)之校驗(yàn)失效問(wèn)題詳解
- Vue系列之Element?UI表單自定義校驗(yàn)規(guī)則
- Element通過(guò)v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
- element表單驗(yàn)證如何清除校驗(yàn)提示語(yǔ)
- element?ui?From表單校驗(yàn)不生效問(wèn)題解決
相關(guān)文章
前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)
當(dāng)我們遇到定位展示的時(shí)候會(huì)出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06vue實(shí)現(xiàn)二級(jí)導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)二級(jí)導(dǎo)航欄效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實(shí)現(xiàn)示例
這篇文章主要介紹了在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01如何通過(guò)URL來(lái)實(shí)現(xiàn)在Vue中存儲(chǔ)業(yè)務(wù)狀態(tài)實(shí)用技巧
這篇文章主要為大家介紹了如何通過(guò)URL來(lái)實(shí)現(xiàn)在Vue中存儲(chǔ)業(yè)務(wù)狀態(tài)實(shí)用技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10vue中通過(guò)使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞功能
組件之間傳遞數(shù)據(jù)的方式有很多種,之所以有這么多種方式,是為了滿足在不同場(chǎng)景不同條件下的使用。這篇文章主要介紹了vue中通過(guò)使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2019-09-09使用wang-editor上傳圖片后端接收不到的問(wèn)題解決
這篇文章主要介紹了如何解決wang-editor 上傳圖片后端接收不到的問(wèn)題,文中通過(guò)圖文結(jié)合給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02Vue中如何實(shí)現(xiàn)在線預(yù)覽word文件、excel文件
這篇文章主要介紹了Vue中如何實(shí)現(xiàn)在線預(yù)覽word文件、excel文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07Vue3全局配置Axios并解決跨域請(qǐng)求問(wèn)題示例詳解
axios 是一個(gè)基于promise的HTTP庫(kù),支持promise所有的API,本文給大家介紹Vue3全局配置Axios并解決跨域請(qǐng)求問(wèn)題,內(nèi)容從axios部署開(kāi)始到解決跨域問(wèn)題,感興趣的朋友一起看看吧2023-11-11