vue element 表单验证不通过,滚动到固对应位置
我们在使用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 表单验证不通过,滚动到固对应位置的更多相关文章
- vue+element 表单验证
效果图 <template> <div class="formValidator"> <div v-for="(item,index) in ...
- Element表单验证(1)
Element表单验证(1) 首先要掌握Element官方那几个表单验证的例子,然后才看下面的教程. Element主要使用了async-validator这个库作为表单验证 async-valida ...
- Element表单验证(2)
Element表单验证(2) 上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇. 上篇讲到async-validator由3大部分组成 ...
- async-validator:Element表单验证
转载文章:Element表单验证(2) Element表单验证(2) 上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇. 上篇讲到a ...
- vue+element 表单封成组件(1)
作为一名刚接触vue不到一个月的菜鸟,思想还没有从操作DOM转变为数据驱动,看vue的代码处处别扭.组里为了让我熟悉vue交给了我一个将element 表单封装成组件的练手任务.由于开发过程中遇到的表 ...
- 使用vue做表单验证
<template> <Form ref="formInline" :model="formInline" :rules="rule ...
- vue element 表单多个验证时,滚动到验证提示的位置
最近项目有个下单的过程,需要输入很多信息,每次提交都要往下滑,还要去验证,测试后发现体验也不好,element框架也没提供这种滚动方法, 不过提供了一个验证的方法 validate (两个参数:是否校 ...
- 解决“element表单验证输入的数字检测出来是string”的问题
form表单: 校验规则: 注意:一.数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符.二.校验中是否添加 ...
- Element表单验证规则
一.简单的逻辑验证使用方法: 方法步骤: 1.在html中给el-form增加 :rules="rules" 2.html中在el-form-item 中增加属性 prop=&qu ...
随机推荐
- PyQt(Python+Qt)学习随笔:gridLayout的layoutHorizontalSpacing和layoutVerticalSpacing属性
layoutHorizontalSpacing和layoutVerticalSpacing属性在Qt Designer中是网格布局(gridLayout)和表单布局(formLayout)都有的属性, ...
- 第三篇 Scrum 冲刺博客
一.站立式会议 1. 会议照片 2. 工作汇报 团队成员名称 昨日(24日)完成的工作 今天(25日)计划完成的工作 工作中遇到的困难 陈锐基 - 个人信息编辑后与组件关联- 表白墙数据用 Vuex ...
- mysql 迁移数据库到 oracle (sql注意问题)
http://ykdn2010.iteye.com/blog/1511349 一. 项目已用到 oracle 函数的转换 1. Oracle 中的 TO_DATE (),TO_CHAR () 示例: ...
- 廖雪峰官网学习js 字符串
操作字符串: length() 长度 totoLowerCase() 小写 toUpperCase() 大写 trim() 移除空白 charAt( ...
- vue seo 优化
预渲染prerender-spa-plugin 如果你只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 ...
- python 字典常用操作
字典键是唯一的,但值则不是 一个简单的字典 dict = {"guo":"1106","tang":"0809",&qu ...
- 移动端 better-scroll基础
一.什么是better-scroll better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件 #滚动原理 1. 与浏览器滚动原理一致,父容器高度固定,子元素内容撑开,必 ...
- Python自动化测试入门必读(最新)
入门自动化测试必读 自动化测试概念 自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程.通常,在设计了测试用例并通过评审之后,由测试人员根据测试用例中描述的规程一步步执行测试,得到实际结果与期 ...
- 使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app
近几年,混合模式移动应用的概念甚嚣尘上,受到了一些中小型企业的青睐,究其原因,混合模式开发可以比传统移动开发节约大量的开发成本和人力成本. Hybrid App(混合模式移动应用)是指介于web-ap ...
- HCIP -- OSPF 总结
OSPF:Open Shortest path First :开方式最短路径优先 一.基础知识: 1.使用范围:IGP 2.协议算法特点:链路状态型路由协议,SPF算法 3.协议是否传递网络掩码:是 ...