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

Posted 2022-04-07 黑子Kuroko

1、使用场景

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

2、关键代码展示

template部分：

<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部分：

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 ~