基于vue2.0的element-ui的form表单验证比较简单,但是有些同学可能对于数组类型的表单验证无从下手,这里我基于一个我自己项目中的例子,展示一下怎么进行数组的表单验证。
项目截图:
image.png
上代码,为了让大家看起来比较清晰,我删掉了无关的代码:
咱们把数组验证的部分拿出来看:
上边代码最关键的地方就是:
:ref="`refForm${index}`"
因为ref不能相同,咱们取到index用来拼接不同的ref字符串。
然后在表单验证的时候就可以循环的进行获取refs并验证了,下面这俩函数大家可以直接复制一下拿去用,保证有用:
confirm(){
//用Promise.all进行全部form表单的验证
Promise.all([
//非数组部分的表单
this.validateForm("refForm"),
//数组部分的表单,用map返回验证函数的调用
...this.formData.ruleList.map((item,index)=>this.validateForm(`refForm${index}`))
]).then(res=>{
if(res) {
// 全部表单验证通过
}
})
},
validateForm(refs){
//获取到form表单的dom,如果是对象直接拿到,如果是数组,就拿第一个
//elementui对循环的form包装成了数组
let valiForm = this.$refs?.[refs].validate?this.$refs?.[refs]:this.$refs?.[refs][0]
return new Promise((resolve,reject)=>{
//在Promise里进行验证,如果通过就resolve()
valiForm.validate(res=>{
if(res) resolve()
else reject()
})
})
},