我们在使用elementIUI实现表单验证,内容比较多的时候,提示内容会被遮挡,这时候用户不清楚什么情况,还会连续点击提交按钮。这个时候需求来啦:我们需要在表单验证不通过的时候,页面滚动到对应的位置。

了解来需求,那我们来看看如何实现?其实比较简单,下面说一下大致思路:

  • 在表单验证方法validate中,提供了两个参数:是否校验成功,和未通过校验的字段规则。
  • 在需要验证的位置加上ref,需要注意,这里的ref需要和prop的值一致

不多说了,直接上代码:

验证表单不通过,会调用 scrollToView 方法,该方法作用就是滚动到对应位置

/**
* element 表单多个验证不通过,滚动到验证提示的位置
* { String } object 验证规则
* 备注:
* 1.this.$refs.infoList.validate((_, object)=>{}) 返回两个参数,第一个参数:验证是否成功,第二个参数:验证规则
* 2.验证的标签上添加ref属性,名字和prop值一致。例:<el-form-item :prop="'infoData.' + scope.$index + '.coalName'" :ref="'infoData.' + scope.$index + '.coalName'" ></el-form-item>
*/
export function scrollToView(_this, object) {
for (let i in object) {
let dom = _this.$refs[i];
if (Object.prototype.toString.call(dom) !== "[object Object]") {
//这里是针对遍历的情况(多个输入框),取值为数组
dom = dom[0];
}
//第一种方法(包含动画效果)
dom.$el.scrollIntoView({
//滚动到指定节点
block: "center", //值有start,center,end,nearest,当前显示在视图区域中间
behavior: "smooth", //值有auto、instant,smooth,缓动动画(当前是慢速的)
}); //第二种方法
// let top = dom.$el.getBoundingClientRect().top; //获取当前节点的偏移值
// console.log(top,'top');
// let scrollTop = document.documentElement.scrollTop; //获取视图滚动值
// let diff = top + scrollTop;
// document.documentElement.scrollTop = diff - 276; //276是第一个输入框节点距离顶部的偏移值,也可以在初始化提前保存
//window.scrollTo(0,diff- 276) //同上
break; //因为我们只需要检测一项,所以就可以跳出循环了
}
}

vue element 表单验证不通过,滚动到固对应位置的更多相关文章

  1. vue+element 表单验证

    效果图 <template> <div class="formValidator"> <div v-for="(item,index) in ...

  2. Element表单验证(1)

    Element表单验证(1) 首先要掌握Element官方那几个表单验证的例子,然后才看下面的教程. Element主要使用了async-validator这个库作为表单验证 async-valida ...

  3. Element表单验证(2)

    Element表单验证(2) 上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇. 上篇讲到async-validator由3大部分组成 ...

  4. async-validator:Element表单验证

    转载文章:Element表单验证(2)   Element表单验证(2) 上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇. 上篇讲到a ...

  5. vue+element 表单封成组件(1)

    作为一名刚接触vue不到一个月的菜鸟,思想还没有从操作DOM转变为数据驱动,看vue的代码处处别扭.组里为了让我熟悉vue交给了我一个将element 表单封装成组件的练手任务.由于开发过程中遇到的表 ...

  6. 使用vue做表单验证

    <template> <Form ref="formInline" :model="formInline" :rules="rule ...

  7. vue element 表单多个验证时,滚动到验证提示的位置

    最近项目有个下单的过程,需要输入很多信息,每次提交都要往下滑,还要去验证,测试后发现体验也不好,element框架也没提供这种滚动方法, 不过提供了一个验证的方法 validate (两个参数:是否校 ...

  8. 解决“element表单验证输入的数字检测出来是string”的问题

    form表单: 校验规则: 注意:一.数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符.二.校验中是否添加 ...

  9. Element表单验证规则

    一.简单的逻辑验证使用方法: 方法步骤: 1.在html中给el-form增加 :rules="rules" 2.html中在el-form-item 中增加属性 prop=&qu ...

随机推荐

  1. 第14.1节 通过Python爬取网页的学习步骤

    如果要从一个互联网前端开发的小白,学习爬虫开发,结合自己的经验老猿认为爬虫学习之路应该是这样的: 一. 了解HTML语言及css知识 这方面的知识请大家通过w3school 去学习,老猿对于html总 ...

  2. OA公文流转系统(未完成)

    基本页面比较多,所以就不贴出来了,具体的页面可以自行浏览. 点我进入OA系统浏览界面(未做响应式布局,需电脑端打开) 账号密码: 部门:bumen------bumen 办公室:bangongshi- ...

  3. ADF 第二篇:使用UI创建ADF

    用户可以通过UI来创建ADF,在UI中创建ADF时,用户不需要下载单独的IDE,而仅仅通过 Microsoft Edge 或者 Google Chrome浏览器.用户登录Azure Portal,选择 ...

  4. 【Alpha冲刺阶段】Scrum Meeting Daily6

    [Alpha冲刺阶段]Scrum Meeting Daily6 1.会议简述 会议开展时间 2020/5/27 8:00 - 8:15 PM 会议基本内容摘要 每日汇报 个人进度.遇到的困难.明日的计 ...

  5. python web的一些常见技术面试笔试题

    1. 三次握手四次挥手   tcp建立连接的过程是三次挥手,断开连接是4次挥手. 三次握手:建立连接时 a. 客户端发送syn=1 seq=k给服务器 b. 服务器接收到之后知道有客户端想建立连接, ...

  6. 题解-CF436E Cardboard Box

    题面 CF436E Cardboard Box \(n\) 个关卡,对每个关卡可以花 \(a_i\) 时间得到 \(1\) 颗星,或花 \(b_i\) 时间得到 \(2\) 颗星,或不玩.问获得 \( ...

  7. 华为云亮相QCon2020深圳站,带你体会大厂的云原生玩法与秘诀

    摘要:在QCon全球软件开发大会上,华为云开发者生态总监张全文作为"云原生应用开发实践"专题出品人,携手华为云四位资深技术专家带来精彩分享. 作为当下技术领域最火热的技术趋势之一, ...

  8. 四、git学习之——远程仓库

    Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上.怎么分布呢?最早,肯定只有一台机器有一个原始版本库,此后,别的机器可以"克隆"这个原始版本库,而且每台机器的版 ...

  9. CSS知识点记录

    1.浏览器style中显示的样式 这里面的样式,是行内样式或者是使用js添加的样式

  10. STL——容器(Map & multimap)的查找

    map.find(key);   //查找键key是否存在,若存在,返回该键的元素的迭代器:若不存在,返回map.end(); map.count(key);   //返回容器中键值为key的对组个数 ...