遇到的项目问题是在每个折叠面板里边都有不同的表单,用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. Rancher 2.3实现K8S一键式升级!再也不用同步升级Rancher啦!

    在Rancher 2.3之前,Rancher的新版本总是随着Kubernetes的新版本一起发布,如果你想要使用最新版本的Kubernetes,那么你需要先升级Rancher才能使用.Rancher ...

  2. 由于ie浏览器ajax缓存 导致layui table表格重载失败的解决办法

    where: { time:new Date()//增加一个数据接口的额外参数→时间戳 }

  3. 扫描枪连接zebra打印机打印条码标签无需电脑

    在一些流水线生产的现场,需要及时打印条码标签,由于现场环境和空间限制,无法摆放电脑或者通过连接电脑来打印条码标签的速度太慢, 瑞科条码特提供了一套扫描枪直接连接条码打印机,扫描枪扫描条码之后直接打印输 ...

  4. mysql多字段内容并到单字段中的操作

    ; SELECT 序号, ryxm `人员姓名`, cylb `成员类别`, gzdw `工作单位`, zc `职称`, GROUP_CONCAT(zzqmc) AS `著作权名称`--多字段合并到一 ...

  5. RBAC-权限管理设计

    1.RBAC(Role-Based Access Control)——基于角色的访问控制.简单来说每个角色有不同的权限,通过对用户赋予不同角色来赋予其对应权限. 2.RBAC0:最基本的用户角色多对多 ...

  6. 【转】CAP 定理的含义

    原文链接:CAP 定理的含义 作者: 阮一峰 日期: 2018年7月16日 分布式系统(distributed system)正变得越来越重要,大型网站几乎都是分布式的. 分布式系统的最大难点,就是各 ...

  7. 求连通块个数 - BFS、DFS、并查集实现

    本文基于leetcode的200.岛屿数量(题目

  8. Java 程序员最喜欢使用的日常工具

    多年来,Java 始终是企业应用程序的支柱.最近几年,Java 也是 Android 开发的首选编程语言.不过开发人员如何使用这种语言呢?一项新的研究阐明了主要使用 Java 的开发人员的工作类型,以 ...

  9. 怎么将DWG转PDF?分享一个在线转换方法

    了解CAD的朋友们都知道,在使用CAD制图软件绘制图纸的时候,默认的CAD图纸保存格式就是为DWG格式.但是DWG格式的文件不能够直接进行打开查看,就需要将DWG转PDF格式.那具体要怎么来进行操作呢 ...

  10. Git实战指南----跟着haibiscuit学Git(第八篇)

    笔名:  haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...