<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
vue element el-form 多級巢狀驗證的實現範例
2022-08-12 14:00:10
最近在做專案時遇到這樣一個需求，一個form表單裡面有兩個欄位數量不固定，可以動態的增刪，在提交的時候不管數量有多少都需要驗證，頁面效果如下：
form表單對應的資料結構如下:
voucherInfo: {
cash: [
{
cashNum: '', // 押金流水號
cashPayType: null, // 押金支付型別
}
],
cashPayTime: '', // 押金支付時間
cashPayVoucher: [], // 押金支付憑證
commissionNum: '', // 佣金流水號
commissionPayType: null, // 佣金支付方式
commissionPayTime: '', // 佣金支付時間
commissionPayVoucher: [], // 佣金支付憑證
remark: '' // 備註
}
在這裡主要考慮的就是如何驗證voucherInfo的第一個欄位，它是一個陣列，陣列裡面又是一個物件，我們要驗證這個物件的每個屬性，簡而言之，就是驗證物件裡面的陣列裡面的物件屬性。
方法一：el-form裡面再巢狀一個el-form
<el-form
ref="voucherForm"
:rules="voucherRule"
:model="voucherInfo"
label-width="140px"
>
<div
v-for="(item, index) in voucherInfo.cash"
:key="index"
>
<!-- 巢狀的el-form model繫結的是voucherInfo.cash裡面的物件 -->
<!-- 又定義了一個rules :rules="subVoucherRule"-->
<el-form
ref="subVoucherForm"
:model="item"
:rules="subVoucherRule"
label-width="140px"
>
<el-row>
<el-col :span="6">
<el-form-item
prop="cashNum"
:label="'押金流水號' + (index + 1)"
>
<el-input
v-model="item.cashNum"
palceholder="請輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
:label="'押金支付方式' + (index + 1)"
prop="cashPayType"
>
<el-select
v-model="item.cashPayType"
placeholder="請選擇"
>
<el-option
v-for="i in cashPayTypeOptions"
:label="i.label"
:value="i.value"
:key="i.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button
type="primary"
icon="el-icon-minus"
circle
@click="handleMinusClick(index)"
>
</el-button>
<el-button
type="primary"
icon="el-icon-plus"
circle
@click="handleAddClick()"
>
</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-row>
<el-col :span="6">
<el-form-item label="押金支付時間" prop="cashPayTime">
<el-date-picker
v-model="voucherInfo.cashPayTime"
placeholder="請選擇"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上傳支付憑證" prop="cashPayVoucher">
<el-upload
class="avatar-upload"
action=""
>
<img v-if="voucherInfo.cashPayVoucher.length" src="" alt="" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="佣金流水號" prop="commissionNum">
<el-input
v-model="voucherInfo.commissionNum"
placeholder="請輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="佣金支付方式" prop="commissionPayType">
<el-select
v-model="voucherInfo.commissionPayType"
placeholder="請選擇"
>
<el-option
v-for="item in commissionPayTypeOptions"
:label="item.label"
:value="item.value"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="佣金支付時間" prop="commissionPayTime">
<el-date-picker
v-model="voucherInfo.commissionPayTime"
placeholder="請選擇"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="佣金支付憑證" prop="commissionPayVoucher">
<el-upload
class="avatar-upload"
action=""
>
<img v-if="voucherInfo.commissionPayVoucher.length" src="" alt="" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="備註">
<el-input
type="textarea"
placeholder="請輸入"
v-model="voucherInfo.remark"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
驗證規則：
voucherRule: {
cashPayTime: [{ required: true, message: '請選擇押金支付時間', trigger: 'change'}],
cashPayVoucher: [{ required: true, message: '請上傳押金支付憑證', trigger: 'change'}],
commissionNum: [{ required: true, message: '請輸入佣金流水號', trigger: 'blur'}],
commissionPayType: [{ required: true, message: '請選擇佣金支付方式', trigger: 'change'}],
commissionPayTime: [{ required: true, message: '請選擇佣金支付時間', trigger: 'change'}],
commissionPayVoucher: [{ required: true, message: '請上傳佣金支付憑證', trigger: 'change'}],
},
subVoucherRule: {
cashNum: [{ required: true, message: '請輸入押金流水號', trigger: 'blur'}],
cashPayType: [{ required: true, message: '請選擇押金支付方式', trigger: 'change'}],
}
提交時驗證程式碼：因為有兩個form，所以兩個都需要驗證
<el-form
ref="voucherForm"
:rules="voucherRule"
:model="voucherInfo"
label-width="140px"
>
<el-row
v-for="(item, index) in voucherInfo.cash"
:key="index"
>
<el-col :span="6">
<!--注意有改動的是這裡 prop動態繫結cashNum rules寫在了這裡 -->
<el-form-item
:prop="'cash['+index+'].cashNum'"
:label="'押金流水號' + (index + 1)"
:rules="{
required: true, message: '請輸入押金流水號', trigger: 'blur'
}"
>
<el-input
v-model="item.cashNum"
palceholder="請輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<!--注意有改動的是這裡 prop動態繫結cashPayType rules寫在了這裡 -->
<el-form-item
:label="'押金支付方式' + (index + 1)"
:prop="'cash['+ index +'].cashPayType'"
:rules="{
required: true, message: '請選擇押金支付方式', trigger: 'change'
}"
>
<el-select
v-model="item.cashPayType"
placeholder="請選擇"
>
<el-option
v-for="i in cashPayTypeOptions"
:label="i.label"
:value="i.value"
:key="i.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button
type="primary"
icon="el-icon-minus"
circle
@click="handleMinusClick(index)"
>
</el-button>
<el-button
type="primary"
icon="el-icon-plus"
circle
@click="handleAddClick()"
>
</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="押金支付時間" prop="cashPayTime">
<el-date-picker
v-model="voucherInfo.cashPayTime"
placeholder="請選擇"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上傳支付憑證" prop="cashPayVoucher">
<el-upload
class="avatar-upload"
action=""
>
<img v-if="voucherInfo.cashPayVoucher.length" src="" alt="" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="佣金流水號" prop="commissionNum">
<el-input
v-model="voucherInfo.commissionNum"
placeholder="請輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="佣金支付方式" prop="commissionPayType">
<el-select
v-model="voucherInfo.commissionPayType"
placeholder="請選擇"
>
<el-option
v-for="item in commissionPayTypeOptions"
:label="item.label"
:value="item.value"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="佣金支付時間" prop="commissionPayTime">
<el-date-picker
v-model="voucherInfo.commissionPayTime"
placeholder="請選擇"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="佣金支付憑證" prop="commissionPayVoucher">
<el-upload
class="avatar-upload"
action=""
>
<img v-if="voucherInfo.commissionPayVoucher.length" src="" alt="" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="備註">
<el-input
type="textarea"
placeholder="請輸入"
v-model="voucherInfo.remark"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
方法二：直接把驗證規則寫在html中
<el-form
ref="voucherForm"
:rules="voucherRule"
:model="voucherInfo"
label-width="140px"
>
<el-row
v-for="(item, index) in voucherInfo.cash"
:key="index"
>
<el-col :span="6">
<!--注意有改動的是這裡 prop動態繫結cashNum rules寫在了這裡 -->
<el-form-item
:prop="'cash['+index+'].cashNum'"
:label="'押金流水號' + (index + 1)"
:rules="{
required: true, message: '請輸入押金流水號', trigger: 'blur'
}"
>
<el-input
v-model="item.cashNum"
palceholder="請輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<!--注意有改動的是這裡 prop動態繫結cashPayType rules寫在了這裡 -->
<el-form-item
:label="'押金支付方式' + (index + 1)"
:prop="'cash['+ index +'].cashPayType'"
:rules="{
required: true, message: '請選擇押金支付方式', trigger: 'change'
}"
>
<el-select
v-model="item.cashPayType"
placeholder="請選擇"
>
<el-option
v-for="i in cashPayTypeOptions"
:label="i.label"
:value="i.value"
:key="i.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button
type="primary"
icon="el-icon-minus"
circle
@click="handleMinusClick(index)"
>
</el-button>
<el-button
type="primary"
icon="el-icon-plus"
circle
@click="handleAddClick()"
>
</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="押金支付時間" prop="cashPayTime">
<el-date-picker
v-model="voucherInfo.cashPayTime"
placeholder="請選擇"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上傳支付憑證" prop="cashPayVoucher">
<el-upload
class="avatar-upload"
action=""
>
<img v-if="voucherInfo.cashPayVoucher.length" src="" alt="" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="佣金流水號" prop="commissionNum">
<el-input
v-model="voucherInfo.commissionNum"
placeholder="請輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="佣金支付方式" prop="commissionPayType">
<el-select
v-model="voucherInfo.commissionPayType"
placeholder="請選擇"
>
<el-option
v-for="item in commissionPayTypeOptions"
:label="item.label"
:value="item.value"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="佣金支付時間" prop="commissionPayTime">
<el-date-picker
v-model="voucherInfo.commissionPayTime"
placeholder="請選擇"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="佣金支付憑證" prop="commissionPayVoucher">
<el-upload
class="avatar-upload"
action=""
>
<img v-if="voucherInfo.commissionPayVoucher.length" src="" alt="" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="備註">
<el-input
type="textarea"
placeholder="請輸入"
v-model="voucherInfo.remark"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
這樣驗證的時候只需要驗證一個表單就行了。
最終的實現效果：
到此這篇關於vue element el-form 多級巢狀驗證的實現範例的文章就介紹到這了,更多相關element el-form 多級巢狀驗證內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45