基于vue2.0的element-ui的form表單驗證比較簡單，但是有些同學(xué)可能對于數(shù)組類型的表單驗證無從下手，這里我基于一個我自己項目中的例子，展示一下怎么進(jìn)行數(shù)組的表單驗證。

項目截圖：

image.png

上代碼,為了讓大家看起來比較清晰，我刪掉了無關(guān)的代碼：

<template>
<div class="create_send">
   <el-form ref="refForm" :model="formData" :rules="rules">
        <el-form-item label="選擇事件：" prop="eventCode">
            <el-select v-model="formData.eventCode" placeholder="請選擇">
                <el-option
                v-for="item in eventoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <el-form  v-for="(item,index) in formData.ruleList" :ref="`refForm${index}`" :key="index" :model="item" :rules="rules">
        <el-form-item label="倒計時天數(shù)：" prop="ruleString" class="err_position">
            <el-input v-model="item.ruleString" style="width:207px;float:left" placeholder="請輸入內(nèi)容"></el-input>
        </el-form-item>
    </el-form>
</div>
</template>
<script>
import { sysDictMoreType } from '@/api/neo/shareHouse'
export default {
    data(){
        return {
            formData:{
                eventCode:"",
                eventName:"",
                ruleList:[
                    {
                        ruleString:""
                    }
                ]
            },
            eventoptions:[],
            rules:{
                eventCode:[{required:true,message:"請選擇事件類型",trigger:"change"}],
                ruleString:[{required:true,message:"請?zhí)顚懙褂嫊r天數(shù)",trigger:"blur"}],
            }
        }
    },
    mounted(){
        this.getSelectData()
    },
    methods:{
        confirm(){
            Promise.all([
                this.validateForm("refForm"),
                ...this.formData.ruleList.map((item,index)=>this.validateForm(`refForm${index}`))
            ]).then(res=>{
                if(res) {
                    // 表單驗證通過
                }
            })
        },
        validateForm(refs){
            let valiForm = this.$refs?.[refs].validate?this.$refs?.[refs]:this.$refs?.[refs][0]
            return new Promise((resolve,reject)=>{
                valiForm.validate(res=>{
                    if(res) resolve()
                    else reject()
                })
            })
        },
        getSelectData(){//獲取下拉選擇框列表
            sysDictMoreType(["im_event_code"]).then(res=>{
                this.eventoptions = res?.data?.im_event_code||[]
            })
        },
        addEvent(){//新增一條發(fā)送時間
            this.formData.ruleList.push({
                ruleString:""
            })
        },
        deleteEvent(){//刪除一條發(fā)送時間，忽略},
    },
}
</script>
<style lang="scss">
//節(jié)省篇幅，刪掉了css
</style>

咱們把數(shù)組驗證的部分拿出來看：

<el-form  v-for="(item,index) in formData.ruleList"  :key="index" :model="item" :rules="rules">
     <el-form-item label="倒計時天數(shù)：" prop="ruleString" class="err_position">
         <el-input v-model="item.ruleString" style="width:207px;float:left" placeholder="請輸入內(nèi)容"></el-input>
     </el-form-item>
 </el-form>

上邊代碼最關(guān)鍵的地方就是：

:ref="`refForm${index}`"

因為ref不能相同，咱們?nèi)〉絠ndex用來拼接不同的ref字符串。
然后在表單驗證的時候就可以循環(huán)的進(jìn)行獲取refs并驗證了,下面這倆函數(shù)大家可以直接復(fù)制一下拿去用，保證有用：

confirm(){
     //用Promise.all進(jìn)行全部form表單的驗證
     Promise.all([
         //非數(shù)組部分的表單
         this.validateForm("refForm"),
         //數(shù)組部分的表單，用map返回驗證函數(shù)的調(diào)用
         ...this.formData.ruleList.map((item,index)=>this.validateForm(`refForm${index}`))
     ]).then(res=>{
         if(res) {
             // 全部表單驗證通過
         }
     })
 },
 validateForm(refs){
      //獲取到form表單的dom，如果是對象直接拿到，如果是數(shù)組，就拿第一個
      //elementui對循環(huán)的form包裝成了數(shù)組
     let valiForm = this.$refs?.[refs].validate?this.$refs?.[refs]:this.$refs?.[refs][0]
     return new Promise((resolve,reject)=>{
         //在Promise里進(jìn)行驗證，如果通過就resolve()
         valiForm.validate(res=>{
             if(res) resolve()
             else reject()
         })
     })
 },