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框的更多相关文章

  1. vue+element表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能:   实现这个功能,总共分 ...

  2. Element 表单校验不消失问题

    由于不好的命名习惯,所以我的:rule   :ref   :model命名就是写了改,改了再写. 直到今天出现了这个毛病就是  “表单验证不消失” 比方说这里的  ‘密码不能为空’,在我已经输入了数字 ...

  3. js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI(前端职业生涯见过的最烦的校验)

    最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...

  4. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  5. 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

  6. 简单好用的表单校验插件——jQuery Validate基本使用方法总结

    jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/t ...

  7. js-动态表单校验-吐血总结最近遇到的变态表单校验2---element+原生

    上一部分总结了基础常用的js表单校验,包括原生以及框架,下面来总结这一个月涉及到的动态校验: 动态表单校验大致分为三种情况: 1. 首先是固定校验规则,但是表单组件是动态生成的,例如:在表单或者表格里 ...

  8. Vue Element-ui表单校验规则,你掌握了哪些?

    1.前言   Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的.   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...

  9. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

随机推荐

  1. MYSQL5.5源码包编译安装

    MYSQL5.5源码安装首先安装必要的库yum -y install gcc*###### 安装 MYSQL ######首先安装camke 一.支持YUM,则yum install -y cmake ...

  2. SAE Django如何禁止外部IP访问

    在SAE上基于Django搭建的Web工程有时需要禁止来自某些特定IP地址的访问请求. 例如一个为搭建在SAE的其他项目提供服务的内部工程,可以设置为只允许SAE内部的IP地址访问,从而提高项目的安全 ...

  3. Eclipse_Package Presentation

    Package Presentation ->Flat ->Hierarchical更常用

  4. C++统计程序运行时间代码片段

    因为经常需要统计代码的运行时间,所以计时功能就显得很重要, 记录一下现在喜欢用的计时方式,供日后查阅. 1.下面是计时主函数, bool TimeStaticMine(int id,const cha ...

  5. MariaDB select

    1.环境部署: syntax语法错误 查询基本使用(条件,排序,聚合函数,分组,分页) --创建学生表 create table students ( id int unsigned not null ...

  6. ElasticSearch的中文分词器ik

    一.前言   为什么要在elasticsearch中要使用ik这样的中文分词呢,那是因为es提供的分词是英文分词,对于中文的分词就做的非常不好了,因此我们需要一个中文分词器来用于搜索和使用. 二.IK ...

  7. 【HANA系列】SAP HANA的ini文件存储路径

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA的ini文件存储 ...

  8. docker安装jenkins自动化部署

    Docker之Jenkins自动化部署 1.拉取jenkins镜像images(类比:java中的类) docker pull jenkinsci/jenkins:lts 或 docker pull ...

  9. angular - ngFor, trackby

    ngFor ngForOf指令通常使用缩写形式*ngFor为集合中的每个项呈现模板的结构指令.该指令放置在元素上,该元素将成为克隆模板的父级. <li *ngFor="let item ...

  10. Neo4j下载与使用

    Neo4j 官网 : https://neo4j.com/ Neo4j 国内: http://neo4j.com.cn/topic/5b003eae9662eee704f31cee http://we ...