element表单校验未通过定位到未通过字段位置

小半 • 2023年1月18日下午6:34 • 技术随笔 • 阅读 259

前言

最近在使用element中表单组件时发现当字段项比较多时点击提交，校验提示信息只会在该字段项下方显示，用户体验非常不好，优化方式是让表单校验时自动定位到未通过验证字段位置。

优化前：

优化后：

实现思路：

1.首先我们需要给提交事件添加一个参数 object ；
2.当校验不通过时收集所有未通过字段项提示信息，将其通过 push 方法添加到定义好的数组中（str）；
3.通过 this.$refs[Object.keys(object)[0]] 获取到首个字段校验不通过的提示信息；
4.利用 Object.prototype.toString.call() 方法判断 this.$refs[Object.keys(object)[0]] 的类型是否为对象的字符串形式；
5.最后通过 scrollIntoView 方法滚动到首个不通过校验字段项。

代码实现起来也非常简单，如下：

methods: {
  // 事件方法
  submitForm(formName) {
    this.$refs[formName].validate((valid, object) => {
      if (valid) {
        //校验通过执行逻辑
      } else {
        let str = [];
        for (let key in object) {
          object[key].map((item) => {
            str.push(item.message);
          });
          let dom = this.$refs[Object.keys(object)[0]];
          if (Object.prototype.toString.call(dom) !== "[object Object]") {
            dom = dom[0];
            break;//结束语句并跳出语句，进行下个语句执行
          }
          // 定位代码
          dom.$el.scrollIntoView({
            block: "center",
            behavior: "smooth",
          });
        }
        // 页面提示未通过校验字段项，并以逗号分隔
        this.$message.error(str.join(","));
      }
    });
  },
},