美文网首页
elementUI表单校验自动定位未通过验证字段位置

elementUI表单校验自动定位未通过验证字段位置

作者: 陶菇凉 | 来源:发表于2020-11-19 09:57 被阅读0次

    .elementUI的表单提交没有layui的那么智能,能直接跳到验证未通过的字段位置,所以需要自己写。

    // 表单验证,页面过长,验证未通过跳到指定位置
    export const verifyJump = {
        data(){
            return{
            }
        },
        created(){
        },
        methods:{
          submit(formName){
            this.$refs[formName].validate((valid,object) => {
              if (valid) {}else{
                this.verifyJumpFn(object)
              }
            })
          },
          verifyJumpFn(object){
                for (let i in object) {
                  let dom = this.$refs[i];
                  if (Object.prototype.toString.call(dom) !== '[object Object]') {
                    //这里是针对遍历的情况(多个输入框),取值为数组
                    dom = dom[0]
                    break
                  }
                dom.$el.scrollIntoView(false);
                // 下面这种写法不兼容ie
                // dom.$el.scrollIntoView({
                //     //滚动到指定节点
                //     block: 'end', //值有start,center,end,nearest,当前显示在视图区域中间
                //     behavior: 'smooth', //值有auto、instant,smooth,缓动动画(当前是慢速的)
                //   })
                }
            }
        }
    }
    

    注意

    image.png

    相关文章

      网友评论

          本文标题:elementUI表单校验自动定位未通过验证字段位置

          本文链接:https://www.haomeiwen.com/subject/thskiktx.html