veeValidate using data-vv-scope to achieve partial region checksum errors and clearing

1, Scene

As shown, I want to log in, register two different tab pages of each form validation.

2, the key code shows

template section:

<div class="login-panel" v-show="activeTab === 1">
    <div class="panel-content">
        <div class="login-account-input panel-input">
            <el-input
            v-model="loginData.account"
            placeholder="手机号/账号/平台号"
            clearable
            v-validate="'required'"
            data-vv-scope="login"
            name="account"
            data-vv-as="手机号/账号/平台号"
            ></el-input>
        </div>
        <div class="login-pwd-input panel-input">
            <el-input
            v-model="loginData.pwd"
            placeholder="请输入登录密码"
            clearable
            v-validate="'required'"
            data-vv-scope="login"
            name="pwd"
            data-vv-as="密码"
            ></el-input>
        </div>
    </div>
    <div class="panel-errors">
        <span v-if="errors.has('login.account')">{{errors.first('login.account')}}</span>
        <span v-else-if="errors.has('login.pwd')">{{errors.first('login.pwd')}}</span>
        <span v-else-if="otherError">{{otherError}}</span>
    </div>
    <div class="panel-btns">
        <el-button class="default-btn" @click="loginDialogVisible = false">取消</el-button>
        <el-button class="default-btn" type="main" @click="login">登录</el-button>
    </div>
</div>
<div class="register-panel" v-show="activeTab === 2">
    <div class="panel-content">
        <div class="register-mobile-input panel-input">
            <el-input
            v-model="registerData.mobile"
            placeholder="请输入手机号"
            clearable
            v-validate="'required'"
            data-vv-scope="register"
            name="mobile"
            data-vv-as="手机号"
            ></el-input>
        </div>
        <div class="register-code-input panel-input">
            <el-input
            v-model="registerData.verCode"
            placeholder="请输入验证码"
            clearable
            v-validate="'required'"
            data-vv-scope="register"
            name="code"
            data-vv-as="验证码"
            ></el-input>
        </div>
        <div class="register-pwd-input panel-input">
            <el-input
            v-model="registerData.pwd"
            placeholder="请输入密码（6-18位数字与字母组合）"
            clearable
            v-validate="'required'"
            data-vv-scope="register"
            name="pwd"
            data-vv-as="密码"
            ></el-input>
        </div>
    </div>
    <div class="panel-errors">
        <span v-if="errors.has('register.mobile')">{{errors.first('register.mobile')}}</span>
        <span v-else-if="errors.has('register.code')">{{errors.first('register.code')}}</span>
        <span v-else-if="errors.has('register.pwd')">{{errors.first('register.pwd')}}</span>
        <span v-else-if="otherError">{{otherError}}</span>
    </div>
    <div class="panel-btns">
        <el-button class="default-btn" @click="loginDialogVisible = false">取消</el-button>
        <el-button class="default-btn" @click="register" type="main">提交</el-button>
    </div>
</div>

methods section:

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

3, description

For each field to be verified to add data-vv-scope attribute;

Get the fields can be obtained within a given range by the scope data-vv-scope attribute value of a certain field.;

js portion may. $ validator.validateAll method of passing data-vv-scope attribute value to verify all of the fields within the scope of the current range by calling this.

 

-------------------- how subsequent supplementary emptied errors --------------------

Plus a data-vv-scope after a direct call this.errors.clear () is not valid, we need to pass a value corresponding to the scope of the job.

Example code:

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

Description:

Here the addition of a delay, because the actual application, without delay will lead to empty the data in the form of time, veeValidate will work once, resulting in errors appeared once, so add a delay to fix this little bug ~