Element通過(guò)v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
普通的form表單校驗(yàn)
日常業(yè)務(wù)開發(fā)中，對(duì)于中后臺(tái)管理系統(tǒng)，form表單校驗(yàn)是一個(gè)很常見(jiàn)的問(wèn)題。
查閱Element官方文檔，我們了解到，form表單校驗(yàn)是這樣的，需要給所校驗(yàn)的el-form-item添加prop屬性值，這個(gè)屬性值便就是當(dāng)前元素v-model 所綁定的值。如圖所示：
v-for 循壞的表單校驗(yàn)
那么問(wèn)題來(lái)了，通過(guò)v-for 遍歷循環(huán)渲染的form表單怎么添加校驗(yàn)?zāi)?？主要?wèn)題就在于其prop了。
再次閱讀官方文檔，發(fā)現(xiàn)這樣一個(gè)行字，動(dòng)態(tài)增減表單項(xiàng)，誒，動(dòng)態(tài)增減，好像和我的需求差不多呢，也有校驗(yàn)，點(diǎn)開看看。這是鏈接
如圖：v-for 循壞的el-form-item，區(qū)分他們的是index，domain是一個(gè)數(shù)組對(duì)象，每個(gè)el-form-item 中綁定的值是每一項(xiàng)的value，設(shè)置每個(gè)prop為圖中標(biāo)識(shí)的那樣，從而實(shí)現(xiàn)校驗(yàn)。
實(shí)現(xiàn)的代碼
官網(wǎng)中通過(guò)字符串拼接的方式添加prop，看著稍稍比較繁瑣，可以通過(guò)ES6中的模版字符串替換。
效果圖：
到此這篇關(guān)于Element通過(guò)v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Element v-for循環(huán)渲染的form表單校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無(wú)”的情況校驗(yàn)通過(guò)(示例代碼)
- 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表單驗(yàn)證如何清除校驗(yàn)提示語(yǔ)
- element?ui?From表單校驗(yàn)不生效問(wèn)題解決
相關(guān)文章
vue3組件化開發(fā)之可復(fù)用性的應(yīng)用實(shí)例詳解
不斷把公共的、可以獨(dú)立拆分出來(lái)的抽出來(lái)作為一個(gè)獨(dú)立可復(fù)用的組件來(lái)向上提供調(diào)用,這樣讓我們的代碼更加方便組織和管理,并且擴(kuò)展性也更強(qiáng),下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)之可復(fù)用性應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了命令行CLI一鍵生成各種煩人的lint配置實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue引入高德地圖實(shí)現(xiàn)流程，實(shí)現(xiàn)步驟是通過(guò)vue的方法引入地圖，初始化地圖，設(shè)置寬和高，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
vue實(shí)現(xiàn)購(gòu)物車拋物線小球動(dòng)畫效果的方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)購(gòu)物車拋物線小球動(dòng)畫效果的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js實(shí)現(xiàn)拋物線動(dòng)畫效果購(gòu)物車功能相關(guān)原理與操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
vue2.0 watch里面的 deep和immediate用法說(shuō)明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
VsCode新建VueJs項(xiàng)目的詳細(xì)步驟
本篇文章主要介紹了VsCode新建VueJs項(xiàng)目的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue2老項(xiàng)目vite升級(jí)改造過(guò)程記錄
目前vite主要默認(rèn)是支持給vue3使用的,并且如果使用官方的cli創(chuàng)建的項(xiàng)目一樣會(huì)默認(rèn)使用vue3去構(gòu)建項(xiàng)目,此時(shí)對(duì)于一些vue2的老項(xiàng)目就顯得不友好了,下面這篇文章主要給大家介紹了關(guān)于vue2老項(xiàng)目vite升級(jí)改造的相關(guān)資料,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了VUE餓了么樹形控件添加增刪改功能的示例代碼，非常具有實(shí)用價(jià)值，有興趣的可以了解一下2017-10-10
這篇文章主要介紹了vue中mixins的工具的封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05