开发项目的时候遇到了数组循环表单校验的需求。具体解决方案如下:
我这边是多表单校验,包含对象和数组表单
1、创建一个Promise对象
//只有form表单是对象表单,其他都是数组表单
const formName = ['form','orderForm','buyerForm','riskForm','supplierForm','basicsForm']
const validates = (item) => {
return new Promise((resolve, reject) => {
if(item != 'form'){
for(let i=0;i<this.$refs[item].length;i++){
this.$refs[item][i].validate((valid) => {
if (!valid) {
reject(new Error('验证不对'))
}
})
}
resolve()
}else{
this.$refs[item].validate((valid) => {
if (valid) {
resolve()
} else {
reject(new Error('验证不对'))
}
})
}
})
}
由于数组表单校验中的**this.$refs[item]**是一个数组,这里需要特别的注意一下;
2、创建一个Promise.all的方法
Promise.all(formName.map(item => validates(item))).then(() => {
this.$confirm('是否确认提交此申请?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//校验成功以后需要的操作
}).catch(() => {
this.$message({
type: 'info',
message: '已取消确认'
});
});
}).catch(() => {
//校验失败时抛出的信息
this.msgError("请正确填写信息");
})
3、数组表单中需要注意的地方
<div class="add-btn">
<el-button
icon="el-icon-plus"
size="mini"
@click="addBuyer"
v-hasPermi="['system:user:add']"
></el-button>
</div>
<div class="relative" v-for="(item,index) in info.buyerEntityList" :key="index">
<h3>{{'买方信息'+(index+1)}}</h3>
<div class="reduce-btn" v-if="index!==0">
<el-button
icon="el-icon-minus"
size="mini"
@click="delBuyer(index)"
v-hasPermi="['system:user:add']"
></el-button>
</div>
<el-row :gutter="20">
<el-form ref="buyerForm" :model="info.buyerEntityList[index]" :rules="rules" label-width="180px">
<el-col :span="12">
<el-form-item label="注册地址:" prop="registerAddr">
<el-input v-model="item.registerAddr"></el-input>
</el-form-item>
<el-form-item label="联系人:" prop="linkman">
<el-input v-model="item.linkman"></el-input>
</el-form-item>
<el-form-item label="电子邮件:" prop="email">
<el-input v-model="item.email"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
需要注意的地方是**:model**的写法。