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


    <div class="login" 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: {
        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

  • 相关阅读:
    内边距
    文本修饰
    背景重复样式background-repeat
    图片做背景
    Map value类型不同的写法
    js登录,回车登录
    Java JS SHA-256加密
    JsonArray转List,list转json字符串
    按钮,图像提交
    cocos2d-x游戏引擎核心之三——主循环和定时器
  • 原文地址:https://www.cnblogs.com/terrylin/p/11205998.html
Copyright © 2020-2023  润新知