使用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) ...
随机推荐
- PAT甲级专题|树的遍历
PAT甲级专题-树的遍历 涉及知识点:树.建树.深度优先搜索.广度优先搜索.递归 甲级PTA 1004 输出每一层的结点,邻接表vector建树后.用dfs.bfs都可以边搜边存当前层的数据, #in ...
- 腾讯面试官问我Java中boolean类型占用多少个字节?我说一个,面试官让我回家等通知
本文首发于微信公众号:程序员乔戈里 什么是boolean类型,根据官方文档的描述: boolean: The boolean data type has only two possible value ...
- 在phpstudy集成环境下的nginx服务器下配置url重写
直接在对应的vhosts.conf配置文件的location / {}中添加以下内容: location / { index index.html index.htm index.php; #auto ...
- Undefined symbols for architecture x86_64"_OBJC_CLASS_$_QQApiInterface 怎么搞
今天上午报了一个这样的错误 解决办法 如此如此 ~~ 然后编译 看看报的什么错误 还是不行的话就重新导入三方库 添加依赖库 结果build success
- [TimLinux] Python 函数(2)
1. 作用 最大化的代码重用:建设复制.粘贴 最小化的代码冗余:减少重复代码 流程分解:将做一件事情分解为相应的步骤,不同步骤封装在不同的函数中. 2. 定义 def 函数名(可选的参数列表): 函数 ...
- C++与数据结构课程设计---定票咨询系统
订票咨询管理系统 设计编制一个订票管理系统,考虑旅客不同的要求.例如,选择不同的交通工具,希望在旅途中的时间尽可能地短,期望旅费尽可能省,或要求中转次数最少等.为旅客提供两种或三种最优决策.车票基本信 ...
- 用.NET模拟天体运动
用.NET模拟天体运动 这将是一篇罕见而偏极客的文章. 我上大学时就见过一些模拟太阳系等天体运动的软件和网站,觉得非常酷炫,比如这个(http://www.astronoo.com/en/articl ...
- ARTS-S shell脚本实现循环
#!/bin/bash i=0 while [ "$i" != "100" ] && [ "$RESP" != " ...
- Tesseract-OCR 字体库下载地址
https://github.com/tesseract-ocr/tesseract/wiki/Data-Files
- 【CSS】346- 你所不知道的 CSS 阴影技巧与细节
偷懒了1个多礼拜,在工作饱和的情况下,怎么坚持学习?今天的分享来自@Coco国服第一切图仔,我们聊聊CSS属性box-shadow- 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 ...