iview表单校验使用resetField的坑

最新推荐文章于 2023-04-22 20:26:08 发布

weixin_43145591

最新推荐文章于 2023-04-22 20:26:08 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43145591/article/details/124331637

本文讲述了开发者在进行表单校验时遇到的挑战，即验证码错误信息与表单其他验证错误叠加，通过自定义验证函数和v-modal绑定值解决输入验证码问题的过程，重点在于找出为何一直提示‘请输入验证码’的解决方案。

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

在开发中，遇到表单校验，让偶旁边有一个发送验证码的按钮，如果发送验证码失败，则将errorMessage显示在最下面表单校验出现错误的地方
在这里插入图片描述
但是有时候，验证码也是有校验错误信息的，这两个错误信息就重叠在一起了

后来使用

this.$refs['forgotForm'].fields.forEach( (e) => {
                        if(e.prop == 'authCode'){
                            e.resetField()
                        }
                    })

是能够将验证码的错误信息给清除掉的，但是我在输入验证码，一直说”请输入验证码“获取不到我已经输入的验证码信息，在网上找没有相应的方法，后来我对验证码做了自定义校验，通过判断是否有value值来报错”请输入验证码“还是不行，最后通过验证码v-modal绑定的值验证，就不会拿不到输入的值了，得以解决，不知道为啥会一直说”请输入验证码“，打印也能够打印出来。

validateAuthCode(rules,value,callback){
            console.log(this.formItem.authCode)
            if(!this.formItem.authCode){
                callback(new Error('请输入验证码'))
                return
            }else{
                callback()
            }
        },