我们在使用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. PyQt(Python+Qt)学习随笔:gridLayout的layoutHorizontalSpacing和layoutVerticalSpacing属性

    layoutHorizontalSpacing和layoutVerticalSpacing属性在Qt Designer中是网格布局(gridLayout)和表单布局(formLayout)都有的属性, ...

  2. 第三篇 Scrum 冲刺博客

    一.站立式会议 1. 会议照片 2. 工作汇报 团队成员名称 昨日(24日)完成的工作 今天(25日)计划完成的工作 工作中遇到的困难 陈锐基 - 个人信息编辑后与组件关联- 表白墙数据用 Vuex  ...

  3. mysql 迁移数据库到 oracle (sql注意问题)

    http://ykdn2010.iteye.com/blog/1511349 一. 项目已用到 oracle 函数的转换 1.  Oracle 中的 TO_DATE (),TO_CHAR () 示例: ...

  4. 廖雪峰官网学习js 字符串

    操作字符串: length()           长度 totoLowerCase() 小写 toUpperCase()      大写 trim()            移除空白 charAt( ...

  5. vue seo 优化

    预渲染prerender-spa-plugin 如果你只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 ...

  6. python 字典常用操作

    字典键是唯一的,但值则不是 一个简单的字典 dict = {"guo":"1106","tang":"0809",&qu ...

  7. 移动端 better-scroll基础

    一.什么是better-scroll better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件 #滚动原理 1. 与浏览器滚动原理一致,父容器高度固定,子元素内容撑开,必 ...

  8. Python自动化测试入门必读(最新)

    入门自动化测试必读 自动化测试概念 自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程.通常,在设计了测试用例并通过评审之后,由测试人员根据测试用例中描述的规程一步步执行测试,得到实际结果与期 ...

  9. 使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app

    近几年,混合模式移动应用的概念甚嚣尘上,受到了一些中小型企业的青睐,究其原因,混合模式开发可以比传统移动开发节约大量的开发成本和人力成本. Hybrid App(混合模式移动应用)是指介于web-ap ...

  10. HCIP -- OSPF 总结

    OSPF:Open Shortest path First  :开方式最短路径优先 一.基础知识: 1.使用范围:IGP 2.协议算法特点:链路状态型路由协议,SPF算法 3.协议是否传递网络掩码:是 ...