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 ...
随机推荐
- Python面向对象-定制方法
Python中的class可以定义许多定制方法,可以让我们方便的生成特定的类. 我们之前介绍了__slots__.__len__(),python中还有许多这样的特殊函数: __str__ >& ...
- VS激活(Visual Studio)
以下是Visual Studio各个版本的激活密匙: Visual Studio Enterprise 企业版: BF8Y8-GN2QH-T84XB-QVY3B-RC4DF Visual Studio ...
- Java用广度优先搜索快速搜索文件
背景 在开发的过程中,经常需要在文件系统里按某些条件搜索文件,比如音乐播放器扫描音乐,而搜索文件,大多人喜欢用递归的方式,而这也是最容易想到的方式.递归方式如果文件夹很深就容易造成栈溢出,而且不断的压 ...
- Docker安全扫描工具之DockerScan
前言 本篇简单介绍Docker扫描工具DockerScan的安装使用.下述过程是在CentOS 7.6的虚拟机上进行的. [root@localhost ~]# cat /etc/redhat-rel ...
- 测试人员必备之 mysql 常用命令学习指南
1.数据库连接 1.通过命令行连接数据库 [root@localhost ~]# mysql -u root -p Enter password: 输入以上命令,回车后输入密码,回车,出现 mysql ...
- 阿里蒋晓伟谈计算引擎Flink和Spark的对比
本文整理自云栖社区之前对阿里搜索事业部资深搜索专家蒋晓伟老师的一次采访,蒋晓伟老师,认真而严谨.在加入阿里之前,他曾就职于西雅图的脸书,负责过调度系统,Timeline Infra和Messenger ...
- 一起学Spring之AOP
概述 在软件开发中,我们重点关注的是业务逻辑代码,但在实际开发中,需要写的代码却不仅仅是业务逻辑,还需要处理记录日志,异常处理,事务控制等一些与业务无关的事情.而且这些代码也是服务端必须的,类似这样的 ...
- Git实战指南----跟着haibiscuit学Git(第六篇)
笔名: haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...
- 字段明明存在,用Web API使用该字段进行查询报错?
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- 配置 yum 源的两种方法
配置 yum 源的两种方法 由于 redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,重启安装,再配置其他源,以下为详细过程: 1.删除red ...