快捷導(dǎo)航

vue element實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證

更新時(shí)間：2024年06月07日 16:53:33 作者：清風(fēng)拂山感

這篇文章主要介紹了vue element實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue element多個(gè)Formt表單同時(shí)驗(yàn)證

多個(gè)Form內(nèi)容統(tǒng)一提交驗(yàn)證

<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:[],//接受驗(yàn)證返回結(jié)果數(shù)組
        formArr:['form1','form2','form3','form4'],//存放表單ref數(shù)組
    }，
    methods:{
        //封裝驗(yàn)證函數(shù)
        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的結(jié)果
        },
        submit(){
            let _self=this;
            _self.formArr.forEach(item => { //根據(jù)表單的ref校驗(yàn)
                _self.checkForm(item)
            })
           //resultArr數(shù)組的值必須是promise對(duì)象才能使用Promise.all，在checkForm做了這一步
            Promise.all(_self.resultArr).then(function() { //都通過(guò)了
              alert('所有表單驗(yàn)證通過(guò)')
              // 該區(qū)域使用this無(wú)效，promise內(nèi)面的this表示局部，并不代表VueComponet實(shí)例
            }).catch(function() {
                console.log("err");
            });
        }
    }
}

vue多個(gè)表單校驗(yàn) (巧用new promise)

場(chǎng)景

同一個(gè)頁(yè)面有多個(gè)模塊，每個(gè)模板又單獨(dú)使用了一個(gè)表單組件，那么我們?cè)邳c(diǎn)擊提交按鈕時(shí)如何同時(shí)校驗(yàn)多個(gè)表單，我們可以使用Promise

方案

1、子組件

子組件：return 出當(dāng)前的表單的數(shù)據(jù)

onSubmit() {
    let _self=this
    return new Promise((resolve, reject) =>{
        _self.$refs.form.validate(valid => {
            if (valid) { // 檢驗(yàn)成功 傳當(dāng)前表單的數(shù)據(jù)
                resolve({0:_self.form})
            } else {
                this.$message.error('員工自選-清單需求，請(qǐng)按要求填寫(xiě)')
                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時(shí)，調(diào)用子組件的onSubmit方法，接受promise的返回結(jié)果，再通過(guò)Promise.all()方法一一驗(yàn)證

onSubmit() {
    let  newArr = [] //承接promise的返回結(jié)果
    for (let v = 0; v < 6; v ++) {
        let res =this.$refs['Form' + v].onSubmit()
        newArr.push(res)
    }
    Promise.all(newArr).then(res => { //都通過(guò)了
    	console.log('res',res)
        //res是數(shù)組，需轉(zhuǎn)對(duì)象
        let obj = Object.assign({},...res)
        this.form = obj
        console.log('大功告成',this.form)
    }).catch(err=> {
        console.log('err',err)
    })
},