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

項(xiàng)目截圖：

上代碼,為了讓大家看起來比較清晰，我刪掉了無關(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="請(qǐng)選擇">
                <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="倒計(jì)時(shí)天數(shù)：" prop="ruleString" class="err_position">
            <el-input v-model="item.ruleString" style="width:207px;float:left" placeholder="請(qǐng)輸入內(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:"請(qǐng)選擇事件類型",trigger:"change"}],
                ruleString:[{required:true,message:"請(qǐng)?zhí)顚懙褂?jì)時(shí)天數(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) {
                    // 表單驗(yàn)證通過
                }
            })
        },
        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ā)送時(shí)間
            this.formData.ruleList.push({
                ruleString:""
            })
        },
        deleteEvent(){//刪除一條發(fā)送時(shí)間，忽略},
    },
}
</script>
<style lang="scss">
//節(jié)省篇幅，刪掉了css
</style>

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

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

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

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

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

confirm(){
     //用Promise.all進(jìn)行全部form表單的驗(yàn)證
     Promise.all([
         //非數(shù)組部分的表單
         this.validateForm("refForm"),
         //數(shù)組部分的表單，用map返回驗(yàn)證函數(shù)的調(diào)用
         ...this.formData.ruleList.map((item,index)=>this.validateForm(`refForm${index}`))
     ]).then(res=>{
         if(res) {
             // 全部表單驗(yàn)證通過
         }
     })
 },
 validateForm(refs){
 	  //獲取到form表單的dom，如果是對(duì)象直接拿到，如果是數(shù)組，就拿第一個(gè)
 	  //elementui對(duì)循環(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)行驗(yàn)證，如果通過就resolve()
         valiForm.validate(res=>{
             if(res) resolve()
             else reject()
         })
     })
 },

有幫助的話，點(diǎn)個(gè)贊唄！

上一篇：nodejs如何讀取并修改文件內(nèi)容？
下一篇：js發(fā)布-訂閱模式（觀察者模式）文章來源地址http://www.zghlxwxcb.cn/news/detail-731868.html

到了這里，關(guān)于【vue】element-ui的form數(shù)組表單驗(yàn)證（循環(huán)表單驗(yàn)證）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！