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
          }
        })

原文地址:https://www.cnblogs.com/yanyanliu/p/12043619.html

时间: 2024-10-09 00:08:06

element的表单校验自动定位到该位置的相关文章

vue+element表单校验功能

要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能:   实现这个功能,总共分为以下4布: 在el-form标签中定义:rules="rules";ref="reference" 在el-form-item定义prop="name"; 在选项data中定义rules校验规则; 在提交方法中检查用户行为 template代码:

vue 表单校验(二)

vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐,因而一直在研究中 表单校验分类 前后端校验 前端校验 后端校验 这种目前一般是结合起来使用,很少单纯前端校验,或者单纯后端校验的 前端检验 数据录入时校验 数据回显时校验 动态创建时校验 数据是否必填时校验 接下来所谈论的校验都是基于前端进行校验,若是后天校验,只是统一校验规则而已,这样前后便可以统

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

JQuery 表单校验插件 validate 实践纪录

JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有插件对应, validate插件便是一个. 官网地址 : http://jqueryvalidation.org/ 官网文档:http://jqueryvalidation.org/documentation/ 下面网址是开发者提供的demo, 代码可下载, 可以给大家提供参考: http://jq

表单校验

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrong{ color: red; } </style> <script src="jquery-1.9.1.js"></script> <

jQuery表单校验jquery.validate.js的使用

一:首先在页面引入 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> 二:纯HTML代码 <html xmlns="http://www.w3.org/1999/xhtm

vue表单校验(三)

vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 通过表单提交时,触发校验,未通过的表单会添加is-error,之后滚动到对应的错误位置即可 页面视图 实现逻辑 触发条件 在提交时,若是未通过则开始进行判断,由于是依赖于is-error的class类名,因而需要等form表单错误的元素添加完is-error类名后再进行判断 submitForm1

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有: 1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定) 2.el-form rules,model属性绑定,ref标识 自定义表单验证的坑: 一.valid