vue element el-form 多級嵌套驗證的實現示例
最近在做項目時遇到這樣一個需求，一個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 多級嵌套驗證內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- vue表單驗證rules及validator驗證器的使用方法實例
- vue封裝form表單組件拒絕重復寫form表單
- el-form resetFields無效和validate無效的可能原因及解決方法
- vue element實現表格增加刪除修改數據
- v-for中動態校驗el-form表單項的實踐