我要评论vue element多个formt表单同时验证
多个form内容统一提交验证
<el-form ref="form1"></el-form>
<el-form ref="form2"></el-form>
<el-form ref="form3"></el-form>
<el-form ref="form4"></el-form>
export default{
data(){
resultarr:[],//接受验证返回结果数组
formarr:['form1','form2','form3','form4'],//存放表单ref数组
}，
methods:{
//封装验证函数
checkform(formname){
let _self=this;
_self.resultarr = []
let result = new promise(function(resolve, reject) {
_self.$refs[formname].validate((valid) => {
if (valid) {
resolve();
} else { reject() }
})
})
_self.resultarr.push(result) //push 得到promise的结果
},
submit(){
let _self=this;
_self.formarr.foreach(item => { //根据表单的ref校验
_self.checkform(item)
})
//resultarr数组的值必须是promise对象才能使用promise.all，在checkform做了这一步
promise.all(_self.resultarr).then(function() { //都通过了
alert('所有表单验证通过')
// 该区域使用this无效，promise内面的this表示局部，并不代表vuecomponet实例
}).catch(function() {
console.log("err");
});
}
}
}
vue多个表单校验 (巧用new promise)
场景
同一个页面有多个模块，每个模板又单独使用了一个表单组件，那么我们在点击提交按钮时如何同时校验多个表单，我们可以使用promise
方案
- 1、子组件
子组件：return 出当前的表单的数据
onsubmit() {
let _self=this
return new promise((resolve, reject) =>{
_self.$refs.form.validate(valid => {
if (valid) { // 检验成功 传当前表单的数据
resolve({0:_self.form})
} else {
this.$message.error('员工自选-清单需求，请按要求填写')
reject()
}
})
})
},
- 2、父组件
<!-- 方案需求 -->
<div v-show="active === 2">
<formemployeelist ref="form0"></formemployeelist>
<formemployeegift ref="form1"></formemployeegift>
<formemployeecustomization ref="form2"></formemployeecustomization>
<formenterpriseslist ref="form3"></formenterpriseslist>
<formenterprisesgift ref="form4"></formenterprisesgift>
<formenterprisescustomization ref="form5"></formenterprisescustomization>
</div>
父组件：onsubmit时，调用子组件的onsubmit方法，接受promise的返回结果，再通过promise.all()方法一一验证
onsubmit() {
let newarr = [] //承接promise的返回结果
for (let v = 0; v < 6; v ++) {
let res =this.$refs['form' + v].onsubmit()
newarr.push(res)
}
promise.all(newarr).then(res => { //都通过了
console.log('res',res)
//res是数组，需转对象
let obj = object.assign({},...res)
this.form = obj
console.log('大功告成',this.form)
}).catch(err=> {
console.log('err',err)
})
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论