遇到的项目问题是在每个折叠面板里边都有不同的表单,用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的表单校验自动定位到该位置的更多相关文章

  1. 【21】vuex 与element iu表单校验

    转:http://www.cnblogs.com/gsgs/p/6753682.html element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方 ...

  2. vue+element表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能:   实现这个功能,总共分 ...

  3. js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI(前端职业生涯见过的最烦的校验)

    最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...

  4. vue 表单校验(二)

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  5. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  6. AngularJS 1.2.x 学习笔记(表单校验篇)

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  7. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  8. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  9. 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

随机推荐

  1. NET Framework项目移植到NET Core上遇到的一系列坑(2)

    目录 获取请求的参数 获取完整的请求路径 获取域名 编码 文件上传的保存方法 获取物理路径 返回Json属性大小写问题 webconfig的配置移植到appsettings.json 设置区域块MVC ...

  2. centos7安装python3.7.4

    yum install gcc make zlib  zlib-devel openssl openssl-devel libffi-devel bzip2-devel ncurses-devel g ...

  3. Python真牛逼,获取压缩文件密码,我只要一分钟!

    事情的经过是这样的: 又是奶茶,行吧行吧. 快点开工,争取李大伟回来之前搞定. 李大伟说是6位数字密码 那么我们可以利用python生成全部的六位数字密码 这样,我们就生成了一个从000000到999 ...

  4. NLTK实现文本切分

    之前已经了解了使用nltk库,将文本作为参数传入相应函数进行切分的方法,下面看看使用正则表达式如何来进行文本切分. 1. 使用正则表达式切分 1.1 通过RegexpTokenizer 进行切分.先导 ...

  5. How to: Apply Attributes to Entity Properties when Using Model First 如何:在ModelFirst时将属性应用于实体属性

    In a Model First data model, object properties are declared in the designer-generated files, and you ...

  6. leaflet 结合 Echarts4 实现散点图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  7. Android数据库GreenDao的使用总结

    一.GreenDao的介绍 GreenDAO是一个开源的Android ORM(“对象/关系映射”),通过ORM(称为“对象/关系映射”),节省了我们在数据库开发过程的时间! 通过GreenDao,我 ...

  8. AlertDialog创建对话框的测试

    AlertDialog的功能是非常强大的,它可以创建各种对话框,它的结构分为:图标区.标题区.内容区.按钮区共四个区域.以这样的思路区创建AlertDialog是非常简单的. 创建AlertDialo ...

  9. 基于Redis扩展模块的布隆过滤器使用

    什么是布隆过滤器?它实际上是一个很长的二进制向量和一系列随机映射函数.把一个目标元素通过多个hash函数的计算,将多个随机计算出的结果映射到不同的二进制向量的位中,以此来间接标记一个元素是否存在于一个 ...

  10. 10. Vue - axios

    一.预备知识 1. JS面向对象 特点:ES5之前用构造函数方式,构造函数就是一个普通函数,它的函数名大写. 构造函数的问题:方法不会提升至构造函数内,而是每创建一个对象,就要把那个方法保存在每个对象 ...