使用VeeValidate的data-vv-scope指定验证范围

    

        

            
        
        

            
        
    
    

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

        取消
        登录
    


    

        

            
        
        

            
        
        

            
        
    
    

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

        取消
        提交
    





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()
	}

　　

 

// 校验所有字段.
validator.validate(); // 验证要匹配的字段. validator.validate('field'); // 校验某个范围下的字段 validator.validate('scope.field'); // 校验某个范围下的所有字段. validator.validate('scope.*'); // 校验未配置范围的字段. validator.validate('*');

 

参考：

data-vv-scope 说明

https://baianat.github.io/vee-validate/api/data-attrs.html

Validate API 说明

https://baianat.github.io/vee-validate/api/validator.html#api

使用入门

https://blog.csdn.net/qq_14988399/article/details/80678317

https://blog.csdn.net/beyond__devil/article/details/84956810