遇到的项目问题是在每个折叠面板里边都有不同的表单,用element上的校验时,若有没填写的表单或不符合表单格式的要求,则自动展开该折叠面板,且页面定位到没校验成功的表单

  1.   this.$refs.form.validate((valid, object) => {
  2.           if (valid) {
  3.             alert('submit!')
  4.           } else {
  5.             let split = ''
  6.             for (let i in object) {
  7.               let dom = this.$refs[i]
  8.               if (Object.prototype.toString.call(dom) !== '[object Object]') {
  9.                 //这里是针对遍历的情况(多个输入框),取值为数组
  10.                 dom = dom[0]
  11.                 // 第一个未填写必填项的表单被记录,这个是为了处理如何把校验未成功的第一个面板展开
  12.                 split = dom.prop
  13.                 let index = split.indexOf('.')
  14.                 let last = split.lastIndexOf('.')
  15.                 // 通过未填写的表单索引展开折叠面板
  16.                 this.activeName = Number(split.slice(index + 1, last))
  17.                 break
  18.               }
  19.               dom.$el.scrollIntoView({
  20.                 //滚动到指定节点
  21.                 block: 'center', //值有start,center,end,nearest,当前显示在视图区域中间
  22.                 behavior: 'smooth' //值有auto、instant,smooth,缓动动画(当前是慢速的)
  23.               })
  24.             }
  25.             console.log('error submit!!')
  26.             return false
  27.           }
  28.         })

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. Support URL

    如您有任何疑问或者建议,请通过以下方式与我们取得联系,我们会尽快响应您的反馈: 邮箱:eighteyes_cn@163.com

  2. iOS核心动画高级技巧 - 6

    11. 基于定时器的动画 基于定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲 ...

  3. 使用CocoaPods配置iOS百度地图sdk问题记录20191024

    1.在Podfile中加入添加库名 pod 'BaiduMapKit' #百度地图SDK 2.安装百度地图 pod install 出现问题: [!] Error installing BaiduMa ...

  4. oracle性能优化(项目中的一个sql优化的简单记录)

    在项目中,写的sql主要以查询为主,但是数据量一大,就会突出sql性能优化的重要性.其实在数据量2000W以内,可以考虑索引,但超过2000W了,就要考虑分库分表这些了.本文主要记录在实际项目中,一个 ...

  5. C#开发微信小程序(五)

    导航:C#开发微信小程序系列 关于小程序项目结构,框架介绍,组件说明等,请查看微信小程序官方文档,关于以下贴出来的代码部分我只是截取了一些片段,方便说明问题,如果需要查看完整源代码,可以在我的项目库中 ...

  6. 一起学SpringMVC之国际化

    随着网络的发展,在Web开发中,系统的国际化需求已经变得非常的普遍.本文主要讲解SpringMVC框架对多语言的支持,仅供学习分享使用,如有不足之处,还请指正. 什么是国际化? 国际化(interna ...

  7. Flask 路由,配置,蓝图

    路由 # -*- coding: utf-8 -*-   from flask import Flask, url_for                app = Flask(__name__)   ...

  8. Git实战指南----跟着haibiscuit学Git(第七篇)

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

  9. 【好书推荐】《剑指Offer》之硬技能(编程题7~11)

    本文例子完整源码地址:https://github.com/yu-linfeng/BlogRepositories/tree/master/repositories/sword <[好书推荐]& ...

  10. 【Java基础】Annotation 的本质和自定义实现

    Java 中注解的实现原理 一.引言 在 Java5 之前,利用 xml 进行配置是各大框架的常规操作,这种方式可以实现松耦合并完成框架中几乎所有需要的配置,但随着项目的扩展,xml 文件本身的内容将 ...