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 ...
随机推荐
- adb shell常用命令
一.文件操作相关命令 1.文件操作命令 子命令 参数 说明 cd 无 进入目录 cat [-beflnstuv] [-B bsize] [file...] 查看文件内容-n:显示行号-b:显示行号,但 ...
- ReactNative: 使用弹出框组件ActionSheetIOS组件
一.简介 在上一篇文章中,详细介绍了对话框组件,除此之外,React-Native系统还给开发者提供了一个弹框框组件ActionSheetIOS组件,它的弹出方式与对框框不同,它是从底部弹出,与iOS ...
- Unicode、UTF-8、Big Endian、Little Endian、GBK、UCS-2
一.Unicode.UCS.GBK 1.开始计算机只在美国用.八位的字节一共可以组合出256(2的8次方)种不同的状态.把这些0×20以下的字节状态称为”控制码”.他们又把所有的空 格.标点符号.数字 ...
- C#基础之事件(2)
在“C#基础之事件(1)”中已对事件有了一个大概,这里对事件进行更深入的学习. 本节按以下内容展开: 1.事件拥有者与事件响应者的关系: 2.事件订阅的多种写法: 3.事件的订阅和取消订阅: 4.多事 ...
- spark shell操作
RDD有两种类型的操作 ,分别是Transformation(返回一个新的RDD)和Action(返回values). 1.Transformation:根据已有RDD创建新的RDD数据集build ...
- axios解决跨域问题(vue-cli3.0)
一.什么是跨域 1.跨域 指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 2.同源策略 是指协议,域名,端口都要相同,其中有一个不同都 ...
- 搭建ES集群
服务版本选择 TEG的ctsdb当前最高版本采用的是es的6.4.3版本,为了日后与ctsdb衔接方便,部署开源版es时也采用该版本.6.4.3版本的es依赖的jdk版本要求在8u181以上,测试环境 ...
- C lang: The caracter reverse
Ax_Code #include<stdio.h> int main(void) { int i; char string[7] = {"mrsoft"}; char ...
- (嵌入式)工程模板的创建和MDK下配置开发STM32F103ZE
⭐ 我的网站: www.mengyingjie.com ⭐ 遇到此类问题,但看了文章还是未解决, 评论或加 QQ:781378815
- Windows 2012 R2 安装RD服务
默认只能同时允许2个用户连接,如果希望更多用户同时连接服务器,需要开启并激活远程桌面服务.参考:https://jingyan.baidu.com/article/9f7e7ec0f5a8686f28 ...