Element plus Form 表单验证执行两次，问题原因及解决办法_element ui 循环表单校验进行两次

 问题原因

 this.$refs['form'].validate((res)=>{
     console.log(res);
     if(res){
         let elCrtUserid = localStorage.getItem('username')
         let elCrtUsername = localStorage.getItem('nickname')
         let elDptName = JSON.stringify(this.form.elDptName)
         addList({...this.form,elCrtUserid,elCrtUsername,elDptName,elDptId}).then(() => {
            this.$modal.msgSuccess('添加成功')
            this.open = false
            this.getList()
         })
     }
})

逻辑为利用回调函数获取验证结果，判断表单验证结果为true后，执行请求

结果请求没发送成功，于是我打印表单验证结果，结果控制台打印了两次，分别为true、false

看了下源码，找到了问题所在

 问题根本原因为源码中try catch,加上我写的回调函数里面的请求报错，于是有了上面的true，false两次打印

解决办法

this.$refs['form'].validate().then(res=>{
    console.log(res)  
    let elCrtUserid = localStorage.getItem('username')
    let elCrtUsername = localStorage.getItem('nickname')
    let elDptName = JSON.stringify(this.form.elDptName)
    addList({...this.form,elCrtUserid,elCrtUsername,elDptName,elDptId}).then(() => {
        this.$modal.msgSuccess('添加成功')
        this.open = false
        this.getList()
    })
}).catch(e=>{
    console.log(e);
    //页面滚动到没通过验证的字段
    this.$refs.form.scrollToField(Object.keys(e)[0])
})

因为validate函数支持回调函数形式，也会返回一个Promise对象，而且catch还会返回没有通过的验证字段

总结

回调函数形式--->表单验证通过，函数执行报错  会执行两次回调函数，分别返回true、false

Promise形式---->表单验证通过，函数执行报错  执行then函数