veeValidate使用data-vv-scope实现部分区域校验以及清空errors

1、使用场景

如图，我要在登录、注册两个不同tab页进行各自的表单校验。

2、关键代码展示

template部分：

    

        

            
        
        

            
        
    
    

        {{errors.first('login.account')}}
        {{errors.first('login.pwd')}}
        {{otherError}}
    
    

        取消
        登录
    


    

        

            
        
        

            
        
        

            
        
    
    

        {{errors.first('register.mobile')}}
        {{errors.first('register.code')}}
        {{errors.first('register.pwd')}}
        {{otherError}}
    
    

        取消
        提交
    

methods部分：

login() {
    this.$validator.validateAll('login').then(res => {
        console.log(res)
    })
},
register() {
    this.$validator.validateAll('register').then(res => {
        console.log(res)
    })
}

3、说明

给每个需要校验的字段添加 data-vv-scope 属性；

获取报错可以通过 data-vv-scope属性值.某某字段 来获得scope范围内的字段；

js部分可以通过调用 this.$validator.validateAll 方法 传入 data-vv-scope属性值 即可校验当前scope范围内的所有字段。

 

-------------------- 后续补充 如何清空errors --------------------

加了 data-vv-scope 之后，直接调用 this.errors.clear() 是无效的，我们需要传入对应的scope值才行。

实例代码如下：

methods: {
    tabHandler(index) {
        this.activeTab = index
    },
    login() {
        this.$validator.validateAll('login').then(res => {
            console.log(res)
        })
    },
    register() {
        this.$validator.validateAll('register').then(res => {
            console.log(res)
        })
    },
    initLoginDialog() {
        this.loginData = {
            account: '',
            pwd: ''
        }
        this.registerData = {
            mobile: '',
            verCode: '',
            pwd: ''
        }
        setTimeout(() => {
            this.errors.clear('login')
            this.errors.clear('register')
        }, this.$resetMillisecond)
        this.otherError = ''
    }
},
watch: {
    loginDialogVisible(val) {
        val && this.initLoginDialog()
    }
}

说明：

此处加了一个延迟，因为实际应用中，不加延迟会导致在表单清空data的时候，veeValidate还会工作一次，导致errors又出现一次，所以加个延迟来解决这个小bug ~