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 ...
随机推荐
- 【SHOI 2007】善意的投票
Problem Description 幼儿园里有 \(n\) 个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾 ...
- 创建基于ASP.NET core 3.1 的RazorPagesMovie项目(一)-创建和使用默认的模板
声明:参考于asp.net core 3.1 官网(以后不再说明) 本教程是系列教程中的第一个教程,介绍生成 ASP.NET Core Razor Pages Web 应用的基础知识. 在本系列结束时 ...
- Yii2 框架整体结构
Yii2框架是一个非常庞大但是并不臃肿的 php 框架.使用 Yii2 框架,可以极大的提升开发效率. 秉持着要知其然也要知其所以然的思想,花了一周的时间,看了 linuor 的 <深入理解Yi ...
- Android——application全局类的使用
目录 1.概述 2.Application基类 3.自定义Application类 4.Application的生命周期 5.Application对象的回调函数 6.Application对象的作用 ...
- LeetCode 按序打印
第1114题 我们提供了一个类: public class Foo { public void one() { print("one"); } public void tw ...
- Java源码记录 - AbstractMap
路径java.util.AbstractMap ()构造方法 /** * 唯一的构造器.(一般由子类隐式调用) */ protexted AbstractMap(){ } size()返回当前map的 ...
- CSS入门(定位的简单总结)
一.定位 普通流定位 浮动定位 相对定位 绝对定位 固定定位 二.position定位 1.static(默认值) 2.relative 相对定位 3.absolute 绝对定位 4.fixed 固定 ...
- English: Class Speed
Xx_Introduce https://www.jianshu.com/p/d1c1b84d89e8 Please protection,respect,love,"China's Int ...
- dedecmsV5.7 百度编辑器ueditor 多图上传 在线管理 排序问题
问题:dedecms后台百度编辑器ueditor的多图上传-在线管理的图片排序有问题,想把这个顺序调成按照文件修改时间倒序来展示 解决方法: 1.打开/include/ueditor/php/acit ...
- Nginx日志常见时间变量解析
$request_time 官方解释:request processing time in seconds with a milliseconds resolution; time elapsed b ...