zoukankan      html  css  js  c++  java
  • 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
              }
            })
  • 相关阅读:
    [Web]flask-excel实现excel文件下载的前后端实现
    [python]UnicodeEncodeError: 'gbk' codec can't encode character 'ufffd'
    [vscode] pylint在虚拟环境下错误告警问题
    [转]jQuery 选择器和dom操作
    用户认证过程及用户认证相关问题整理
    [mariadb]Windows Mariadb 10.2安装过程
    [Python]Flask 源代码分析-config
    【Weiss】【第03章】练习3.9:大整数运算包
    【Weiss】【第03章】练习3.8:有序多项式求幂
    【Weiss】【第03章】链表例程的一些修改
  • 原文地址:https://www.cnblogs.com/yanyanliu/p/12043619.html
Copyright © 2011-2022 走看看