vue element el-form 多級(jí)嵌套驗(yàn)證的實(shí)現(xiàn)示例
更新時(shí)間：2022年08月12日 11:52:54 作者：zhang070514
本文主要介紹了vue element el-form 多級(jí)嵌套驗(yàn)證的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
最近在做項(xiàng)目時(shí)遇到這樣一個(gè)需求，一個(gè)form表單里面有兩個(gè)字段數(shù)量不固定，可以動(dòng)態(tài)的增刪，在提交的時(shí)候不管數(shù)量有多少都需要驗(yàn)證，頁面效果如下：
form表單對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)如下:
voucherInfo: {
cash: [
{
cashNum: '', // 押金流水號(hào)
cashPayType: null, // 押金支付類型
}
],
cashPayTime: '', // 押金支付時(shí)間
cashPayVoucher: [], // 押金支付憑證
commissionNum: '', // 傭金流水號(hào)
commissionPayType: null, // 傭金支付方式
commissionPayTime: '', // 傭金支付時(shí)間
commissionPayVoucher: [], // 傭金支付憑證
remark: '' // 備注
}
在這里主要考慮的就是如何驗(yàn)證voucherInfo的第一個(gè)字段，它是一個(gè)數(shù)組，數(shù)組里面又是一個(gè)對(duì)象，我們要驗(yàn)證這個(gè)對(duì)象的每個(gè)屬性，簡(jiǎn)而言之，就是驗(yàn)證對(duì)象里面的數(shù)組里面的對(duì)象屬性。
方法一：el-form里面再嵌套一個(gè)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里面的對(duì)象 -->
<!-- 又定義了一個(gè)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="'押金流水號(hào)' + (index + 1)"
>
<el-input
v-model="item.cashNum"
palceholder="請(qǐng)輸入"
>
</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="請(qǐng)選擇"
>
<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="押金支付時(shí)間" prop="cashPayTime">
<el-date-picker
v-model="voucherInfo.cashPayTime"
placeholder="請(qǐng)選擇"
></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="傭金流水號(hào)" prop="commissionNum">
<el-input
v-model="voucherInfo.commissionNum"
placeholder="請(qǐng)輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="傭金支付方式" prop="commissionPayType">
<el-select
v-model="voucherInfo.commissionPayType"
placeholder="請(qǐng)選擇"
>
<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="傭金支付時(shí)間" prop="commissionPayTime">
<el-date-picker
v-model="voucherInfo.commissionPayTime"
placeholder="請(qǐng)選擇"
></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="請(qǐng)輸入"
v-model="voucherInfo.remark"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
驗(yàn)證規(guī)則：
voucherRule: {
cashPayTime: [{ required: true, message: '請(qǐng)選擇押金支付時(shí)間', trigger: 'change'}],
cashPayVoucher: [{ required: true, message: '請(qǐng)上傳押金支付憑證', trigger: 'change'}],
commissionNum: [{ required: true, message: '請(qǐng)輸入傭金流水號(hào)', trigger: 'blur'}],
commissionPayType: [{ required: true, message: '請(qǐng)選擇傭金支付方式', trigger: 'change'}],
commissionPayTime: [{ required: true, message: '請(qǐng)選擇傭金支付時(shí)間', trigger: 'change'}],
commissionPayVoucher: [{ required: true, message: '請(qǐng)上傳傭金支付憑證', trigger: 'change'}],
},
subVoucherRule: {
cashNum: [{ required: true, message: '請(qǐng)輸入押金流水號(hào)', trigger: 'blur'}],
cashPayType: [{ required: true, message: '請(qǐng)選擇押金支付方式', trigger: 'change'}],
}
提交時(shí)驗(yàn)證代碼：因?yàn)橛袃蓚€(gè)form，所以兩個(gè)都需要驗(yàn)證
<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">
<!--注意有改動(dòng)的是這里 prop動(dòng)態(tài)綁定cashNum rules寫在了這里 -->
<el-form-item
:prop="'cash['+index+'].cashNum'"
:label="'押金流水號(hào)' + (index + 1)"
:rules="{
required: true, message: '請(qǐng)輸入押金流水號(hào)', trigger: 'blur'
}"
>
<el-input
v-model="item.cashNum"
palceholder="請(qǐng)輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<!--注意有改動(dòng)的是這里 prop動(dòng)態(tài)綁定cashPayType rules寫在了這里 -->
<el-form-item
:label="'押金支付方式' + (index + 1)"
:prop="'cash['+ index +'].cashPayType'"
:rules="{
required: true, message: '請(qǐng)選擇押金支付方式', trigger: 'change'
}"
>
<el-select
v-model="item.cashPayType"
placeholder="請(qǐng)選擇"
>
<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="押金支付時(shí)間" prop="cashPayTime">
<el-date-picker
v-model="voucherInfo.cashPayTime"
placeholder="請(qǐng)選擇"
></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="傭金流水號(hào)" prop="commissionNum">
<el-input
v-model="voucherInfo.commissionNum"
placeholder="請(qǐng)輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="傭金支付方式" prop="commissionPayType">
<el-select
v-model="voucherInfo.commissionPayType"
placeholder="請(qǐng)選擇"
>
<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="傭金支付時(shí)間" prop="commissionPayTime">
<el-date-picker
v-model="voucherInfo.commissionPayTime"
placeholder="請(qǐng)選擇"
></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="請(qǐng)輸入"
v-model="voucherInfo.remark"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
方法二：直接把驗(yàn)證規(guī)則寫在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">
<!--注意有改動(dòng)的是這里 prop動(dòng)態(tài)綁定cashNum rules寫在了這里 -->
<el-form-item
:prop="'cash['+index+'].cashNum'"
:label="'押金流水號(hào)' + (index + 1)"
:rules="{
required: true, message: '請(qǐng)輸入押金流水號(hào)', trigger: 'blur'
}"
>
<el-input
v-model="item.cashNum"
palceholder="請(qǐng)輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<!--注意有改動(dòng)的是這里 prop動(dòng)態(tài)綁定cashPayType rules寫在了這里 -->
<el-form-item
:label="'押金支付方式' + (index + 1)"
:prop="'cash['+ index +'].cashPayType'"
:rules="{
required: true, message: '請(qǐng)選擇押金支付方式', trigger: 'change'
}"
>
<el-select
v-model="item.cashPayType"
placeholder="請(qǐng)選擇"
>
<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="押金支付時(shí)間" prop="cashPayTime">
<el-date-picker
v-model="voucherInfo.cashPayTime"
placeholder="請(qǐng)選擇"
></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="傭金流水號(hào)" prop="commissionNum">
<el-input
v-model="voucherInfo.commissionNum"
placeholder="請(qǐng)輸入"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="傭金支付方式" prop="commissionPayType">
<el-select
v-model="voucherInfo.commissionPayType"
placeholder="請(qǐng)選擇"
>
<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="傭金支付時(shí)間" prop="commissionPayTime">
<el-date-picker
v-model="voucherInfo.commissionPayTime"
placeholder="請(qǐng)選擇"
></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="請(qǐng)輸入"
v-model="voucherInfo.remark"
>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
這樣驗(yàn)證的時(shí)候只需要驗(yàn)證一個(gè)表單就行了。
最終的實(shí)現(xiàn)效果：
到此這篇關(guān)于vue element el-form 多級(jí)嵌套驗(yàn)證的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)element el-form 多級(jí)嵌套驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue的ElementUI form表單如何給label屬性字符串中添加空白占位符
這篇文章主要介紹了vue的ElementUI form表單如何給label屬性字符串中添加空白占位符問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue使用高德地圖搭建實(shí)時(shí)公交應(yīng)用功能（地圖 + 附近站點(diǎn)+線路詳情 + 輸入提示+換乘詳情）
這篇文章主要介紹了vue中使用高德地圖搭建實(shí)時(shí)公交應(yīng)用（地圖 + 附近站點(diǎn)+線路詳情 + 輸入提示+換乘詳情），主要是讓大家熟悉下高德地圖在vue中的使用及vue的常用指令,需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細(xì)介紹了原生echart和vue-echart的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了vue :src 文件路徑錯(cuò)誤問題的簡(jiǎn)單解決方法，本文分步驟給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
vue-quill-editor+plupload富文本編輯器實(shí)例詳解
這篇文章主要介紹了vue-quill-editor+plupload富文本編輯器實(shí)例詳解,需要的朋友可以參考下2018-10-10
Vue中如何實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼
本文主要介紹了Vue中如何實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue如何在線預(yù)覽各類型文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
一步一步實(shí)現(xiàn)Vue的響應(yīng)式(對(duì)象觀測(cè))
這篇文章主要介紹了一步一步實(shí)現(xiàn)Vue的響應(yīng)式(對(duì)象觀測(cè))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue單頁應(yīng)用在頁面刷新時(shí)保留狀態(tài)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue單頁應(yīng)用在頁面刷新時(shí)保留狀態(tài)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼
這篇文章主要介紹了Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06