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)
    })
},

总结

以上为小我私家经验,心愿能给大师一个参考,也心愿巨匠多多撑持剧本之野。

点赞(36) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部