element表单校验提示定位到元素位置

需求来了

一般来说，element-ui的表单是提供表单校验的，就是写好只有，点击提交如果不通过会有红字提醒，如下图：

因为我们这次的表单内容比较多，是会有也没滚动的情况，产品要求我们点击提交去校验的时候要

• 弹出第一个没有通过校验的表单项的提示信息
• 并且滚到目标窗口那里

既然把需求分隔成了两个点就一个一个来解决！

弹出校验失败的第一个信息

这个相对比较简单，因为element的校验函数大家都用过，基本大家一般都只用第一个参数，就是是否校验通过，这次我们要用到他的第二个参数就是校验信息，会包括所有你的表单这次不通过校验的字段和提示文字，我们只需要取第一个即可，看代码：

// 校验规则像下面这样
const rules = {
  name: {required: true, message: '请输入活动名称'},
  age: {required: true, message: '请输入年龄'},
}

// 校验函数                           // 重点是者第二个参数 message
this.$refs.formName.validate((valid, message) => {
  if (valid) { // 如果校验通过则提交
    alert('submit!');
  } else { // 校验不通过
    // 取第一个不通过的信息对象提示即可
    this.$message.error(message[Object.keys(message)[0]].message);
    return false;
  }
});

// message这个参数实际打印出来是这样的（是一个对象）
// 1. 会根据你有多少个不通过校验的表单项就会多少个信息对象在里面
// 2. 信息对象会有两个字段，一个是你的message提示文字，对应你的规则的message，一个是
//    你这个规则对应的字段
{
  name: { message: '请输入活动名称', field: 'name' },
  age: { message: '请输入年龄', field: 'name' },
}

滚到目标窗口

错误做法🙅

对于这个功能，我的第一个想法就是锚点的跳转，那么相应的你就要设置好锚点，我们看看一般做法

• 设置a标签的href属性：<a href="#test"></a>
• 设置目标标签的id属性：<el-input id="test" />

那就是你要给所有的目标跳转点设置上对应的属性，然后通过校验函数拿到属性名，可是上面我们刚刚演示了，拿到校验信息的第二个参数，里面只有校验规则的字段和具体提示文字，也就是说你只能用校验规则的字段来作为锚点的属性：

• 也就是如果你的校验规则是const rules = { name: { required: true, message: '请输入姓名！' } };
• 那么能拿到的也只有name这个属性名字，拿到这个属性再设置一个a标签做跳转

但是但是：由于我的表单内容很多，里面也写个各种根据业务分散了表单项的组件，所以我的rules实际是分散的，不是一个rules对象而已

• 就会造成了属性名重名
• 再者我有200多个表单项目，写那么多把我手给写残废

所以上述方案暂不适用于我！

正确做法🙆

接着我也百度了很多方法，基本的思想，也是根据属性绑定给你要跳转的标签，然后在校验函数获取到属性名再设置各种方法跳转到目标标签的位置，都不是我理想的方法，要么不适用，要么适用的代码量太大，查找的过程之中我发现了一个不错的让视窗跳转到指定的标签的函数给了我一个启发，先看看函数：

// 该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
// el: 就是你的视窗要跳转去的目标元素
// block：'center': 垂直中间对齐
// behavior: 'smooth': 过渡动画丝滑滚动
el.scrollIntoView({ block: 'center', behavior: 'smooth' });

// 关于这个函数完整的文档这这里
// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

就是上面这个函数，我可以很简单的直接跳转到目标标签，那我们的目标标签是什么，出现红字没有通过校验的表单项？不对，我们的目标标签是出现红字的标签，也就是：

(标出蓝色框)

既然每个不通过校验的都会报红字提示，那么每个的红字提示标签肯定一样的，我们来看看

（浏览器检查元素）

el-form-item__error这个类名，让我们看看是不是有很多个：

(打印el-form-item__error的元素标签)

果然，我们证实了每个没通过校验的元素都会有这个标签出现，那么我们只需要获取这个提示标签的第一个，然后用视窗跳转函数跳转过去即可，这样不会有属性名的问题，代码量也很小：

const el = document.querySelectorAll('.el-form-item__error')[0];
el.scrollIntoView({ block: 'center', behavior: 'smooth' });

// 在vue实际开中你把这个代码写在element提供的表单校验函数中会有点问题，会拿不到导致报错
// el-form-item__error元素，所以要用一个$nextTick方法，如下
this.$nextClick(() => {
  const el = document.querySelectorAll('.el-form-item__error')[0];
  el.scrollIntoView({ block: 'center', behavior: 'smooth' });
});

就这样相对简单的完成了需求，但是还是要看大家的场景的，如果场景类似，大家也可以参考一下这个想法，有时候百度不能直接解决问题但是也能开发一下解决的思路！！！

到此这篇关于element表单校验提示定位到元素位置的文章就介绍到这了,更多相关element表单提示定位元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论