element 表单校验失败自动聚焦到失败的input框
1.在对应的input框上添加ref属性,直接根据ref就可精确地获取到元素
<el-form-item label="课程名称" :label-width="formLabelWidth+'px'" prop="title">
<el-input ref="title" v-model="form.title" placeholder="请输入课程名称" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="课程难易程度" :label-width="formLabelWidth+'px'" prop="level">
<el-select ref="level" v-model="form.level" placeholder="请选择课程难易程度">
<el-option label="初级" value="初级"></el-option>
<el-option label="中级" value="中级"></el-option>
<el-option label="高级" value="高级"></el-option>
</el-select>
</el-form-item>
2. element-ui自带的表单验证返回中包含一个invalidFields对象,此对象包含了验证失败的所有属性名
3.遍历invalidFields对象 的属性,拿到它的属性值 与我们上面定义的 ref 一样,我们就可以拿到失败的控件,利用focus 自动聚焦就ok 了
for(var obj in invalidatedata) {
// console.log(obj)
// console.log(obj)
// console.log((this as any).$refs[obj].focus())
// console.log(this.$refs[obj]);
(this as any).$refs[obj].focus();
break;
// console.log(this.$refs.title)
// (this as any).$refs[obj].focus()
}
element 表单校验失败自动聚焦到失败的input框的更多相关文章
- vue+element表单校验功能
要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分 ...
- Element 表单校验不消失问题
由于不好的命名习惯,所以我的:rule :ref :model命名就是写了改,改了再写. 直到今天出现了这个毛病就是 “表单验证不消失” 比方说这里的 ‘密码不能为空’,在我已经输入了数字 ...
- js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI(前端职业生涯见过的最烦的校验)
最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
- 简单好用的表单校验插件——jQuery Validate基本使用方法总结
jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/t ...
- js-动态表单校验-吐血总结最近遇到的变态表单校验2---element+原生
上一部分总结了基础常用的js表单校验,包括原生以及框架,下面来总结这一个月涉及到的动态校验: 动态表单校验大致分为三种情况: 1. 首先是固定校验规则,但是表单组件是动态生成的,例如:在表单或者表格里 ...
- Vue Element-ui表单校验规则,你掌握了哪些?
1.前言 Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的. 我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
随机推荐
- 阶段3 2.Spring_09.JdbcTemplate的基本使用_3 JdbcTemplate在Dao中的使用
实际的开发过程中都是基于dao的 创建持久层dao 定义三个方法 持久层实现类 创建dao的实现类. 添加未实现的方法 通过spring注入 jdbcTemplate.所以这里生成一个jdbcTemp ...
- 阶段3 2.Spring_06.Spring的新注解_7 spring整合junit问题分析
测试类重复代码的问题 这是之前的方式 运行findAll的方法,没有问题 测试人员不需要关心上面的方法,.应该关心的各个方法是否能够正常的运行 对于一个测试工程师,只要写完变量就可以测试了. 可以使用 ...
- Java学习之==>泛型
一.什么是泛型 泛型,即“参数化类型”,在不创建新的类型的情况下,通过泛型指定的不同类型来控制形参具体限制的类型.也就是说在泛型使用过程中,操作的数据类型被指定为一个参数,这种参数类型可以用在类.接口 ...
- zabbix监控httpd进程、添加动作、报警媒介类型
1.在server_agent端创建脚本 mkdir -p /usr/local/etc/zabbix_scripts vi /usr/local/etc/zabbix_scripts/check_h ...
- The window object
At the core of the BOM is the window object, which represents an instance of the browser. The window ...
- 转·c语言函数指针的理解与使用
原文出处:https://www.cnblogs.com/haore147/p/3647262.html 1.函数指针的定义 顾名思义,函数指针就是函数的指针.它是一个指针,指向一个函数.看例子: 1 ...
- 【VS开发】【图像处理】Pleora推出iPORT CL-U3外置抓帧器
全球领先的高性能视频接口产品供应商Pleora科技公司近日宣布推出可将Camera Link®摄像头转化为USB3Vision™摄像头的首个产品iPORT CL-U3外置抓帧器,树立了另一个行业里程碑 ...
- lua基础学习(四)
一,lua字符串 单引号间的一串字符. 双引号间的一串字符. [[和]]间的一串字符. 1.几个常用的转义字符 \b 退格 \f 换页 \n 换行 \r 回车 \t 跳到下一个tab位置 \0 ...
- 接口自动化--数据加密之AES
在接口测试中,会遇到加密的请求数据,例如:常用的base64加密,AES加密,在这里,简述用Python转化AES的加密方法 原理 官网链接:https://pycryptodome.readthed ...
- (5.1.5)引擎管理——多服务器管理之中央管理服务器(CMS)
关键词:中央管理服务器,CMS,多服务器管理 中央管理服务器 -[1]打开 视图->已注册的服务器 [2]注册中央管理服务器 右击中央管理器->注册中央管理服务器 这里输入IP.主机名都可 ...