elemetn表单控件---未通过校验字段提交时自动定位到该字段位置

Posted 2022-04-22 水星记_

前言

最近在使用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 同名）。