首页 > 其他 > 详细

elementUI表单验证之------跳转第一个非法位置

时间:2021-07-21 12:05:49      阅读:17      评论:0      收藏:0      [点我收藏+]

技术分享图片

使用情境: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‘ // 滚动速度
      })
    }
  }
})

 

elementUI表单验证之------跳转第一个非法位置

原文:https://www.cnblogs.com/zhaoyingzhen/p/15038462.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!