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