首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

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

Sonder
2021-09-22
1591字
4分钟
浏览 (3.2k)

方法一

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

下一篇 / vue-router路由动态匹配

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)