img

element的表单校验自动定位到该位置

2021-09-22 0条评论 2.7k次阅读 JavaScript


方法一

遇到的项目问题是在每个折叠面板里边都有不同的表单,用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

方法二

 submit(formName) {
    this.$refs[formName]["validate"]((valid) => {
      if (valid) {

      } else {
        setTimeout(()=>{
            var isError= document.getElementsByClassName("is-error");
            isError[0].querySelector('input').focus();
          },100);
          return false;
      }
    });
  }

转自:https://www.jianshu.com/p/47eee977f1a1

💬 COMMENT


🦄 支持markdown语法

👋友