Element plus Form 表单验证执行两次，问题原因及解决办法

lixianlong1234

于 2023-07-21 10:21:37 发布

阅读量2k

点赞数 4

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/lixianlong1234/article/details/131845098

版权

文章讲述了在使用this.$refs[form].validate进行表单验证时遇到的问题，当验证通过但后续请求出错，导致回调函数被调用两次，返回值分别为true和false。解决方案是改用validate的Promise形式，通过catch处理请求错误，避免回调函数的多次执行。这样可以确保在表单验证通过且无其他错误时才执行后续操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题原因

 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还会返回没有通过的验证字段