這篇“vue element el-form多級嵌套驗證如何實現(xiàn)”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue element el-form多級嵌套驗證如何實現(xiàn)”文章吧。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)永春免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

最近在做項目時遇到這樣一個需求，一個form表單里面有兩個字段數(shù)量不固定，可以動態(tài)的增刪，在提交的時候不管數(shù)量有多少都需要驗證，頁面效果如下：

form表單對應(yīng)的數(shù)據(jù)結(jié)構(gòu)如下:

      voucherInfo: {
        cash: [
          {
            cashNum: '', // 押金流水號
            cashPayType: null, // 押金支付類型
          }
        ],
        cashPayTime: '', // 押金支付時間
        cashPayVoucher: [], // 押金支付憑證
        commissionNum: '', // 傭金流水號
        commissionPayType: null, // 傭金支付方式
        commissionPayTime: '', // 傭金支付時間
        commissionPayVoucher: [], // 傭金支付憑證
        remark: '' // 備注
      }

在這里主要考慮的就是如何驗證voucherInfo的第一個字段，它是一個數(shù)組，數(shù)組里面又是一個對象，我們要驗證這個對象的每個屬性，簡而言之，就是驗證對象里面的數(shù)組里面的對象屬性。

方法一：el-form里面再嵌套一個el-form

驗證規(guī)則：

      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，所以兩個都需要驗證

方法二：直接把驗證規(guī)則寫在html中

這樣驗證的時候只需要驗證一個表單就行了。
最終的實現(xiàn)效果：

以上就是關(guān)于“vue element el-form多級嵌套驗證如何實現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。