使用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
使用VeeValidate的data-vv-scope指定验证范围的更多相关文章
- ssh 登陆指定 验证文件
当前用户jim ssh-keygen -t rsa 生成密钥 把pub结尾的公用密钥数据追加到192.168.1.3上的 /home/tom/.ssh/authKeys(文件名可能不一样) ssh - ...
- ASP.NET MVC4中的Model验证 移除指定验证信息
MVC中通过Model在页面间传值使的程序开发变得更加的快捷,但是很多时候,我们在数据传递的时候为了确保数据的有效性,要对Model的相关属性做基本的数据验证. 不多说直接上个代码,Model的实体类 ...
- MVC中发生System.Data.Entity.Validation.DbEntityValidationException验证异常的解决方法
发生System.Data.Entity.Validation.DbEntityValidationException这个异常的时候,如果没有用特定的异常类去捕捉,是看不到具体信息的. 通常都是用Sy ...
- Spring Data MongoDB 查询指定字段
DBObject dbObject = new BasicDBObject(); //dbObject.put("name", "zhangsan"); //查 ...
- Spring Data JPA查询指定列,并返回实体(改)
现有PostEntiy实力,包含各种属性,如: /** * @Auther: DingShuo * @Date: 2018/7/18 11:09 * @Description: */ @Entity ...
- 使用ABAP Data Validator验证数据有效性
在日常的开发过程中,我们常常要处理不同来源的数据.数据可能来自不可靠的外部系统.不可靠的用户输入和甚至设计有误的数据库表,因此,对数据有效性进行验证是必要的工作. 开源工具ABAP Data Vali ...
- MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html 系列 ...
- MYSQL 为表指定文件位置 data directory
背景知识: 如果表不指定文件位置,它会保存到 data/database_name/table_file;其中data在你指定的安装目录下,为了提高IO我们尽可能的 用到多个硬盘的IO能力,这个就需要 ...
- C# Web 数据注解Data Annotations、模型状态ModelState、数据验证
C#中的模型状态与数据注解,为我们提供了很便利的请求数据的验证. 1. ModelState ModelState在进行数据验证的时候很有用的,它是: 1)验证数据,以及保存数据对应的错误信息. 2) ...
随机推荐
- 使用react-breadcrumbs-dynamic
这是完全独立于路由器的解决方案,你可以将其与任何版本的React Router(2或3或4)或任何其他用于React的路由库一起使用,或者完全不进行路由.您只需要指定面包屑项目及其道具的组件.然而道具 ...
- python3.6异步IO包asyncio部分核心源码思路梳理
关于python异步编程的演进过程,两篇文章阐述得妥妥当当,明明白白. 中文资料:https://mp.weixin.qq.com/s?__biz=MzIxMjY5NTE0MA==&mid=2 ...
- [AHOI2017初中组]guide
题目描述 农场主John最近在网上买了一辆新车,在购买汽车配件时,John不小心点了两次"提交"按钮.导致汽车上安装了两套GPS系统,更糟糕的是John在使用GPS导航时,两套系统 ...
- 蓝牙5.0芯片NRF52810和NRF52832可进行mesh组网
提供智能化mesh照明解决方案,在现有传统灯具的基础上,插入NRF52832/52810的照明Mesh模块,可以迅速升级现有的传统灯具,配合手机APP和服务器系统,使每一盏灯成为物联网的一个智能节点, ...
- BZOJ 3112 [Zjoi2013]防守战线
题解:单纯形:转化为对偶问题: 对于最大化 cx,满足约束 Ax<=b ,x>0 对偶问题为 最小化 bx,满足约束 ATx>=c ,x>0 (AT为A的转置) 这一题的内存真 ...
- iSensor APP 之 摄像头调试 OV9655
iSensor APP 之 摄像头调试 OV9655 iSensor app 非常适合调试各种摄像头,已测试通过的sensor有: l OV7670.OV7725.OV9650.OV9655.OV ...
- Dubbo学习系列之七(分布式订单ID方案)
既然选择,就注定风雨兼程! 开始吧! 准备:Idea201902/JDK11/ZK3.5.5/Gradle5.4.1/RabbitMQ3.7.13/Mysql8.0.11/Lombok0.26/Erl ...
- Vue中实现聊天窗口overflow:auto自动滚动到底部,实现显示当前最新聊天消息
在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的box用的是overflow:auto 注意:vue项目需要注意在dom结构渲染完再进行操作 <div class="mai ...
- Linux搭建rsync服务
一.Rsync的简单介绍 Rsync是一款开源的.快速的.多功能的.可实现全量及增量(全量备份是指全部备份,增量备份是在上一次备份的基础上只备份更新的内容)的本地货远程数据同步备份的优秀工具.Rsyn ...
- java 反射的意义
具体的关于反射的介绍可以参考我的另外一篇博文<深入解析java反射>. 反射的意义是什么,其实就是为了代码简洁,提高代码的复用率,外部调用方便,源代码,反编译都能看到. 某些情况下解耦用反 ...