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 ...
随机推荐
- 第14.1节 通过Python爬取网页的学习步骤
如果要从一个互联网前端开发的小白,学习爬虫开发,结合自己的经验老猿认为爬虫学习之路应该是这样的: 一. 了解HTML语言及css知识 这方面的知识请大家通过w3school 去学习,老猿对于html总 ...
- OA公文流转系统(未完成)
基本页面比较多,所以就不贴出来了,具体的页面可以自行浏览. 点我进入OA系统浏览界面(未做响应式布局,需电脑端打开) 账号密码: 部门:bumen------bumen 办公室:bangongshi- ...
- ADF 第二篇:使用UI创建ADF
用户可以通过UI来创建ADF,在UI中创建ADF时,用户不需要下载单独的IDE,而仅仅通过 Microsoft Edge 或者 Google Chrome浏览器.用户登录Azure Portal,选择 ...
- 【Alpha冲刺阶段】Scrum Meeting Daily6
[Alpha冲刺阶段]Scrum Meeting Daily6 1.会议简述 会议开展时间 2020/5/27 8:00 - 8:15 PM 会议基本内容摘要 每日汇报 个人进度.遇到的困难.明日的计 ...
- python web的一些常见技术面试笔试题
1. 三次握手四次挥手 tcp建立连接的过程是三次挥手,断开连接是4次挥手. 三次握手:建立连接时 a. 客户端发送syn=1 seq=k给服务器 b. 服务器接收到之后知道有客户端想建立连接, ...
- 题解-CF436E Cardboard Box
题面 CF436E Cardboard Box \(n\) 个关卡,对每个关卡可以花 \(a_i\) 时间得到 \(1\) 颗星,或花 \(b_i\) 时间得到 \(2\) 颗星,或不玩.问获得 \( ...
- 华为云亮相QCon2020深圳站,带你体会大厂的云原生玩法与秘诀
摘要:在QCon全球软件开发大会上,华为云开发者生态总监张全文作为"云原生应用开发实践"专题出品人,携手华为云四位资深技术专家带来精彩分享. 作为当下技术领域最火热的技术趋势之一, ...
- 四、git学习之——远程仓库
Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上.怎么分布呢?最早,肯定只有一台机器有一个原始版本库,此后,别的机器可以"克隆"这个原始版本库,而且每台机器的版 ...
- CSS知识点记录
1.浏览器style中显示的样式 这里面的样式,是行内样式或者是使用js添加的样式
- STL——容器(Map & multimap)的查找
map.find(key); //查找键key是否存在,若存在,返回该键的元素的迭代器:若不存在,返回map.end(); map.count(key); //返回容器中键值为key的对组个数 ...