vue element多个Formt表双异时验证
多个Form形式同一提交验证
<el-form ref="form1"></el-form>
<el-form ref="form两"></el-form>
<el-form ref="form3"></el-form>
<el-form ref="form4"></el-form>
export default{
data(){
resultArr:[],//接管验证返归功效数组
formArr:['form1','form两','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
圆案
- 一、子组件
子组件: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()
}
})
})
},
- 两、女组件
<!-- 圆案必要 -->
<div v-show="active === 两">
<FormEmployeeList ref="Form0"></FormEmployeeList>
<FormEmployeeGift ref="Form1"></FormEmployeeGift>
<FormEmployeeCustomization ref="Form两"></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)
})
},
总结
以上为小我私家经验,心愿能给大师一个参考,也心愿巨匠多多撑持剧本之野。
发表评论 取消回复