zoukankan      html  css  js  c++  java
  • elementUI表单验证之------跳转第一个非法位置

    使用情境:el-form表单验证通过,则提交数据,跳转下一步;

         验证不通过则需要跳转第一个非法位置,方便用户定位

    第一种:如果表单内都是input组件

    this.$refs.dataForm.validate(async valid => {
    if (valid) {
      //验证通过,写需要的业务代码
    } else {
        //验证不通过,定位到第一个非法位置
        setTimeout(() => {
          //得到所有验证失败元素
          let isError = document.getElementsByClassName("is-error");
          //得到第一个验证失败元素的input子元素,并聚焦
          isError[0].querySelector('input').focus();
        }, 100);
        return false;
      }
    }) 

    第二种:如果还有图片上传之类的不是input的必填项,则需要用到Element.scrollIntoView()

    Element.scrollIntoView() :让当前的元素滚动到浏览器窗口的可视区域

    不过调用这个方法必须要取到对应元素,所以这里采取的办法是:需要验证的元素,标签上定好属性ref,id,并且两者一致

    this.$refs.dataForm.validate(async valid => {
      if (valid) {
        //验证通过,写需要的业务代码
      } else {
        //验证不通过,定位到第一个非法位置
        //得到所有验证失败元素
        let isError = document.getElementsByClassName("is-error");
        let dom = this.$refs[isError[0].id]
        console.log("dom是什么?",dom);//可以打印出来看是什么
        if (dom[0]) { //如果是个数组
          dom[0].$el.scrollIntoView({
            block: 'center', // 当前元素显示在视图区域中间
            behavior: 'auto' //滚动速度
          })
        } else { //如果是个对象
          dom.$el.scrollIntoView({
            block: 'center', // 当前元素显示在视图区域中间
            behavior: 'auto' // 滚动速度
          })
        }
      }
    })
    
  • 相关阅读:
    CentOS7_装机软件推荐
    http://www.osyunwei.com/archives/4788.html
    SQL经典面试题集锦
    异步方式
    webwxgetcontact 获取的是通讯录里的群或好友的信息
    perl 微信取自己的ID
    perl weixin 发消息接口 webwxsendmsg
    Invalid project description.
    运行期间id是不变的
    关于微信 init接口返回的Count和webwxbatchgetcontact post请求的参数Count
  • 原文地址:https://www.cnblogs.com/zhaoyingzhen/p/15038462.html
Copyright © 2011-2022 走看看