簡單介紹v-for中動態校驗el-form表單項的實踐
導讀 |
在專案開發中,我們經常會遇到表單儲存的功能,本文主要介紹了v-for中動態校驗el-form表單項的實踐,文中透過示例程式碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
|
問題描述
在專案開發中,我們經常會遇到表單儲存的功能,在表單儲存前,常常需要做表單必填項的校驗,校驗透過以後才去發請求儲存表單資料。
但是,這個表單如果是動態的,即:可以新增相同的表單。比如這個表單有輸入框和下拉框需要校驗,點選新增表格按鈕,再新增一個相同的表單,同樣新的這個表單對應的輸入框和下拉框也需要校驗。
本文記錄一下對應程式碼寫法思路,我們先看一下效果圖:
效果圖
程式碼思路
表單的主資料是要寫成物件形式 :model="ruleForm" 不過既然是要動態的,肯定是要迴圈呢,所以,可以寫成這樣:
ruleForm: { // 動態迴圈項陣列 formItemArr: [ { name: "", gender: "", }, ], },
點選新增表格的時候,就可以直接push對應項就行啦,即,這樣:
// 新增一個表格 addForm () { let itemObj = { name: "", gender: "", }; this .ruleForm.formItemArr.push(itemObj); },
重點來嘍,因為是迴圈的,所以prop也要變成動態的了,要拼接上index,就變成根據索引去找對應的校驗項了,即為::prop="'formItemArr.' + index + '.name'" ,這樣的話,就變成了:prop="formItemArr.0.name"、prop="formItemArr.1.name"、prop="formItemArr.2.name" ... 這樣的話,就可以照顧到每一項中的每一個繫結的值了,校驗就不會漏掉
校驗規則寫成內聯就可以觸發校驗函式this.$refs["ruleForm"].validate((val) => {})了
< el-form-item label="姓名" :prop="'formItemArr.' + index + '.name'" :rules="{ required: true, message: '請填寫', trigger: 'blur', }" > ......
完整程式碼
演示的話,大家直接複製貼上即可
< template> < div> < el-button @click="addForm" size="mini" type="primary" plain >新增表格< /el-button > < el-button @click="saveForm" size="mini" type="primary" plain >儲存表格< /el-button > < br /> < br /> < el-form :model="ruleForm" ref="ruleForm" label-width="100px" > < div v-for="(item, index) in ruleForm.formItemArr" :key="index" > < el-form-item label="姓名" :prop="'formItemArr.' + index + '.name'" :rules="{ required: true, message: '請填寫', trigger: 'blur', }" > < el-input size="mini" v-model.trim="item.name" placeholder="請填寫" style="width: 200px" >< /el-input> < /el-form-item> < el-form-item label="性別" :prop="'formItemArr.' + index + '.gender'" :rules="{ required: true, message: '請選擇', trigger: 'change', }" > < el-select clearable size="mini" v-mo del="item.gender" place holder="請選擇" > < el-option label="男" value="男">< /el-option> < el-option label="女" value="女">< /el-option> < /el-select> < /el-form-item> < /div> < /el-form> < /div> < /template> < script> export default { data() { return { ruleForm: { // 動態迴圈項陣列 formItemArr: [ { name: "", gender: "", }, ], }, }; }, met hods: { // 新增一個表格 add Form() { let ite mObj = { name: "", gender: "", }; this.rule Form.form Item Arr.push(itemObj); }, // 儲存表格 save Form() { this .$refs["ruleForm"].validate((val) => { if (val) { con sole.log("符合要求,儲存成功", this.ruleForm); } else { cons ole.log("error submit!!"); re turn false; } }); }, }, }; < /script> < style scoped> . box { wi dth: 100%; hei ght: 100%; box -sizing: border-box; pad ding: 24px; .for mform { wi dth: 360px; .for mformItemClass { pa dding-top: 24px; bo rder: 2px dashed #ccc; ma rgin-bottom: 18px; } } } < /style>
到此這篇關於v-for中動態校驗el-form表單項的實踐的文章就介紹到這了。
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2898789/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- element-ui的----el-form表單校驗巢狀表單校驗(表單多層巢狀)+el-table和el-form巢狀使用表單校驗UIORM巢狀
- OpenGL簡單介紹及實踐
- js-動態表單校驗-吐血總結最近遇到的變態表單校驗2---element+原生JS
- CGlib動態代理-簡單介紹CGLib
- POP簡單介紹與使用實踐
- js動態修改元素中的內容程式碼例項簡單介紹JS
- form表單的onSubmit事件簡單介紹ORMMIT事件
- 【react】實現動態表單中巢狀動態表單React巢狀
- javascript的靜態方法和例項方法簡單介紹JavaScript
- [無心插柳]簡單實現常用的表單校驗函式函式
- 可以被提交的表單元素簡單介紹
- js實現的動態載入css檔案簡單介紹JSCSS
- 動態載入js檔案簡單介紹JS
- js如何阻止表單提交簡單介紹JS
- element-ui表單校驗:有值卻不透過 el-form validateUIORM
- 表單驗證教程簡介
- AngularJS實現的表單編輯提交功能簡單介紹AngularJS
- 簡單介紹Rust中的workspaceRust
- 動態設定元素的css樣式簡單介紹CSS
- jQuery動態載入js檔案簡單介紹jQueryJS
- js動態載入js檔案簡單介紹JS
- 簡單介紹python中的單向連結串列實現Python
- vue+elementUI實現動態增加表單項並新增驗證VueUI
- jQuery表單驗證簡單程式碼例項jQuery
- 實現js檔案動態載入的幾種方式簡單介紹JS
- vue表單校驗方法Vue
- 簡單介紹java中的equals()方法Java
- js的表單元素的defaultValue預設值簡單介紹JS
- element-ui自定義表單校驗規則及常用表單校驗UI
- 簡單介紹NMS的實現方法
- javascript動態改變元素css樣式簡單介紹JavaScriptCSS
- 以 TypeScript Cypress 為例,介紹 14 個測試自動化中簡單實用的實踐技巧TypeScript
- mitmproxy中libmproxy簡單介紹MITIBM
- html中註釋簡單介紹HTML
- Webpack 的簡單介紹Web
- Promise的簡單介紹Promise
- CFRunloopObserverRef 的簡單介紹OOPServer
- jQuery構造物件例項簡單介紹jQuery物件