基于vue2.0的element-ui的form表單驗(yàn)證比較簡單津肛,但是有些同學(xué)可能對于數(shù)組類型的表單驗(yàn)證無從下手,這里我基于一個(gè)我自己項(xiàng)目中的例子祖搓,展示一下怎么進(jìn)行數(shù)組的表單驗(yàn)證烘苹。
項(xiàng)目截圖:
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="倒計(jì)時(shí)天數(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í)顚懙褂?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="請輸入內(nèi)容"></el-input>
</el-form-item>
</el-form>
上邊代碼最關(guān)鍵的地方就是:
:ref="`refForm${index}`"
因?yàn)閞ef不能相同,咱們?nèi)〉絠ndex用來拼接不同的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邓嘹,如果是對象直接拿到酣栈,如果是數(shù)組,就拿第一個(gè)
//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)行驗(yàn)證汹押,如果通過就resolve()
valiForm.validate(res=>{
if(res) resolve()
else reject()
})
})
},