element的表单校验自动定位到该位置
遇到的项目问题是在每个折叠面板里边都有不同的表单,用element上的校验时,若有没填写的表单或不符合表单格式的要求,则自动展开该折叠面板,且页面定位到没校验成功的表单
this.$refs.form.validate((valid, object) => {
if (valid) {
alert('submit!')
} else {
let split = ''
for (let i in object) {
let dom = this.$refs[i]
if (Object.prototype.toString.call(dom) !== '[object Object]') {
//这里是针对遍历的情况(多个输入框),取值为数组
dom = dom[0]
// 第一个未填写必填项的表单被记录,这个是为了处理如何把校验未成功的第一个面板展开
split = dom.prop
let index = split.indexOf('.')
let last = split.lastIndexOf('.')
// 通过未填写的表单索引展开折叠面板
this.activeName = Number(split.slice(index + 1, last))
break
}
dom.$el.scrollIntoView({
//滚动到指定节点
block: 'center', //值有start,center,end,nearest,当前显示在视图区域中间
behavior: 'smooth' //值有auto、instant,smooth,缓动动画(当前是慢速的)
})
}
console.log('error submit!!')
return false
}
})
element的表单校验自动定位到该位置的更多相关文章
- 【21】vuex 与element iu表单校验
转:http://www.cnblogs.com/gsgs/p/6753682.html element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方 ...
- vue+element表单校验功能
要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分 ...
- js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI(前端职业生涯见过的最烦的校验)
最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...
- vue 表单校验(二)
vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
随机推荐
- springIOC及设计模式
一.IOC的概念: 控制反转(inversion of control)和依赖注入(dependency injection)其实是同一个概念.当某个方法需要另外一个对象协助的时候,传统的方法就是有调 ...
- 数百道BAT等大厂最新Python面试真题,学到你手软!
春招临近,无论是要找工作的准毕业生,还是身在职场想要提升自己的程序员,提升自己的算法内功心法.提升 Python 编程能力,总是大有裨益的.今天,小编发现了一份好资源:Python 实现的面试题集锦! ...
- JS Math对象、日期对象、函数、定时器
Math对象 开平方:sqrt 绝对值:abs π:PI x的y次方:pow 四舍五入取整:round 向下取整:floor 向上取整:ceil 最大值:max 最小值: min 随机数:random ...
- 今天遇到的一些关于vsftp的坑!!!
起因:最近在捣鼓Linux,配置vsftp的时候发现权限问题很坑,头疼了一天,发现了一点小问题 常见的身份验证方式: 1.使用系统的用户认证 例如vsftp这种软件,如果想建立一个可以登录FTP的用户 ...
- requests第三方库
requests第三方库 简介: requests是一个优雅而简单的Python 第三方HTTP请求库,专为人类而构建. requests的官方文档同样也非常的完善详尽,而且少见的有中文官方文档:ht ...
- VS Code Remote,在服务器上开发程序,开启全新开发模式
一直使用Idea开发java 程序,头疼的是太太太占用内存了,笔记本电脑经常卡爆,在服务器开发的话又太麻烦,VS Code Remote的带来,解决了这一烦恼.下面来实战一下. VS Code Rem ...
- C#/.Net开发入门篇(3)——console类的输入输出
相信看了我上一篇文章的小伙伴们都知道console这个类的最基本的2个方法了吧,下去练习过的小伙伴应该能知道4个方法. 那么下面我们就来介绍一下上期没有介绍完的另外2个方法Console.WriteL ...
- C# Task 多任务 限制Task并发数量
LimitedTaskScheduler: using System; using System.Collections.Concurrent; using System.Collections.Ge ...
- 知道内存中一个图片的指针IntPtr大小,转换成图片显示
//nSize 为总长度//pImageData 为总数据//nImageSize //一个图片的长度 byte[] _bytes = new byte[nImageSize];// //IntPtr ...
- MongoDB(四):数据类型、插入文档、查询文档
1. 数据类型 MongoDB支持许多数据类型. 字符串 - 这是用于存储数据的最常用的数据类型.MongoDB中的字符串必须为UTF-8. 整型 - 此类型用于存储数值. 整数可以是32位或64位, ...