element表单校验新玩法：一键定位未通过字段位置

前言

在网页表单的开发中，表单校验是一个非常重要的环节。如果表单校验未通过时，能够直接定位到未通过字段位置，将极大地提升用户体验。不仅能够让用户快速找到错误的地方进行修改，也能够减少用户在整个表单页面的浏览时间，提高用户的工作效率。那么，如何实现这一功能呢？本文将为大家详细介绍 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(","));
      }
    });
  },
},

注意： 必填字段项的 el-form-item 需要添加 ref ，作用主要是用来定位（ref 的值建议与 prop 同名）。