<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

使用VeeValidate的data-vv-scope指定验证范围的更多相关文章

  1. ssh 登陆指定 验证文件

    当前用户jim ssh-keygen -t rsa 生成密钥 把pub结尾的公用密钥数据追加到192.168.1.3上的 /home/tom/.ssh/authKeys(文件名可能不一样) ssh - ...

  2. ASP.NET MVC4中的Model验证 移除指定验证信息

    MVC中通过Model在页面间传值使的程序开发变得更加的快捷,但是很多时候,我们在数据传递的时候为了确保数据的有效性,要对Model的相关属性做基本的数据验证. 不多说直接上个代码,Model的实体类 ...

  3. MVC中发生System.Data.Entity.Validation.DbEntityValidationException验证异常的解决方法

    发生System.Data.Entity.Validation.DbEntityValidationException这个异常的时候,如果没有用特定的异常类去捕捉,是看不到具体信息的. 通常都是用Sy ...

  4. Spring Data MongoDB 查询指定字段

    DBObject dbObject = new BasicDBObject(); //dbObject.put("name", "zhangsan"); //查 ...

  5. Spring Data JPA查询指定列,并返回实体(改)

    现有PostEntiy实力,包含各种属性,如: /** * @Auther: DingShuo * @Date: 2018/7/18 11:09 * @Description: */ @Entity ...

  6. 使用ABAP Data Validator验证数据有效性

    在日常的开发过程中,我们常常要处理不同来源的数据.数据可能来自不可靠的外部系统.不可靠的用户输入和甚至设计有误的数据库表,因此,对数据有效性进行验证是必要的工作. 开源工具ABAP Data Vali ...

  7. MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证

    Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html 系列 ...

  8. MYSQL 为表指定文件位置 data directory

    背景知识: 如果表不指定文件位置,它会保存到 data/database_name/table_file;其中data在你指定的安装目录下,为了提高IO我们尽可能的 用到多个硬盘的IO能力,这个就需要 ...

  9. C# Web 数据注解Data Annotations、模型状态ModelState、数据验证

    C#中的模型状态与数据注解,为我们提供了很便利的请求数据的验证. 1. ModelState ModelState在进行数据验证的时候很有用的,它是: 1)验证数据,以及保存数据对应的错误信息. 2) ...

随机推荐

  1. PAT甲级专题|链表

    PAT链表专题 关于PAT甲级的链表问题,主要内容 就是"建立链表" 所以第一步学会模拟链表,pat又不卡时间,这里用vector + 结构体,更简洁 模拟链表的普遍代码 cons ...

  2. 《Windows内核安全与驱动开发》 5.1&5.2 内核与应用方面的编程

    <Windows内核安全与驱动开发>阅读笔记 -- 索引目录 <Windows内核安全与驱动开发>  5.1&5.2 内核与应用方面的编程 一.生成控制设备 如果一个驱 ...

  3. java内存模型和内存结构

    java内存模型说的是多线程,网上可能会有写误导,并不是什么堆.栈.方法区,很多人都会搞混.说白了就是多线程中主线程和本地线程之间的一个数据可见性问题. jmm:java内存模型:jvm:java内存 ...

  4. gdb调试常用方法介绍

    一.概述   GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.没有统一的界面,所有的操作都是通过命令的方式进行提供.对于习惯了图形界面方式进行调试的猿猿来说可能不是很顺手,但是如果你在 ...

  5. PXE+Kickstart网络装机(Centos6.5版本)

    1.原理说明: PXE Client:表示需要安装操作系统的机器,统称客户端: TFTP server:表示安装TFTPD服务的机器: DHCP server:表示安装DCHPD服务的机器: 在实际的 ...

  6. MD5、公钥、私钥、加密、认证

    MD5 MD5的全称是Message-Digest Algorithm 5. MD5将任意长度的“字节串”变换成一个128bit的大整数,并且它是一个不可逆的字符串变换算法. 换句话说就是,即使你看到 ...

  7. go基础之服务退出问题

    最近学习公司微服务的代码,看到每一个微服务的main函数都阻塞在那里,然后里面起的goroutine一直在哪里运行. package main import( "fmt" &quo ...

  8. 2017 CCPC杭州 题解

    2017CCPC杭州题目PDF Problem A. Super-palindrome 题解: 给你一个字符串,每一步可以将一个字符替换为另一个字符,问你最少多少步可以使得,该字符串任意奇数子串为回文 ...

  9. Codeves-5037线段树4加强版(线段树? 。。。分块)

    维护一个序列,要求支持下列2种操作: add a b c:区间[a,b]中每个数加上c count a b:查询区间[a,b]中有多少数是k的倍数(k为给定常数) 输入描述 Input Descrip ...

  10. LInux内核配置过程

    内核版本 linux 2.6.32.2 配置内核的过程 配置内核可以通过执行 make menuconfig 来进行,下面分析该命令的执行流程 执行该目标 %config: scripts_basic ...