el-form之表单校验自动定位到报错位置

清阿哥

欢迎来到清哥的小屋 · 记录成长与思考

今日一言

加载中…

—

小屋足迹

小屋已亮灯 1 天

从 2026-07-21 起，一点点堆起的文字与风景。

本站访客 - 总访问 -

1031 字

5 分钟

el-form之表单校验自动定位到报错位置

2022-07-09

Vue

前端

/

vue

/

javascript

本文同步自 CSDN · 清阿哥，原文发布于 2022-07-09。

1. 背景#

表单校验大多数的表单都会用到，一般情况下只是提示当前哪些项校验不通过，但是如果表单比较需要用户自己去找是哪项校验不通过，这样的用户体验不太好，如果能自动定位到当前校验不通过的表单项体验会更好一些（这里是以elementui 的 el-from 组件为例子）

2. 实现思路#

目前有两个实现方法：

方法一：
- 表单校验不通过的时候，会在未校验成功的表单 el-form-item 标签上加一个类名 is-error，可以从这个类名下手，获取当前校验不通过的所有的类名，然后通过 scrollIntoView 方法进行自动滑动到当前报错的表单项位置

方法二：
- 利用el-form提供的 validate 方法的第二个参数，获取当前校验不通过的rule 对象，获取到报错的 prop 后，在每个需要加表单校验的项上加上 ref，ref 的绑定值和 prop 保持一致这样方便直接定位到哪个prop，然后和第一个方法一样利用 scrollIntoView 方法结合 $ref 获取到$ el 实现自动定位到校验不通过的表单项

3. 实现代码#

方法一实现代码：

1
   // 表单校验
2
    verifyForm() {
3
      this.$refs.basicInfoRule.validate(valid => {
4
        if (valid) {
5
          // 校验通过执行的逻辑
6
        } else {
7
          // 校验不通过自动定位到不通过的表单项
8
          this.moveToErr()
9
        }
10
      })
11
    },
12

13
    // 自动定位到表单报错项
14
    moveToErr() {
15
      this.$nextTick(() => {
16
        let isError = document.getElementsByClassName('is-error')
17
        if (isError.length) {
18
          isError[0].scrollIntoView({
19
            block: 'center',
20
            behavior: 'smooth'
21
          })
22
  // 这个当滑动到报错项之后自动获取输入框的焦点，方便用户直接进行输入，延迟 800ms 是因为需要都能到定位成功后在进行获取焦点体验更好一些
23
          setTimeout(() => {
24
            if (isError[0].previousElementSibling.querySelector('input')) {
25
              isError[0].previousElementSibling.querySelector('input').focus()
26
            }
27
          }, 800)
28
        }
29
      })
30
    }

方法二实现代码：
模板示例代码

1
   <el-form-item label="姓名：" prop="name" ref="name">
2
        <el-input
3
          v-model.number="form."
4
          placeholder="请输入姓名"
5
          clearable
6
        ></el-input>
7
      </el-form-item>

1
 verifyForm() {
2
      this.$refs.ruleForm.validate((valid, object) => {
3
        if (valid) {
4
          //校验通过执行逻辑
5
        } else {
6
          let errorArr = [];
7
          for (let key in object) {
8
            object[key].forEach((item) => {
9
              errorArr.push(item.message);
10
            });
11
            let dom = this.$refs[Object.keys(object)[0]];
12
            if (Object.prototype.toString.call(dom) !== '[object Object]') {
13
              dom = dom[0];
14
              break; //结束语句并跳出语句，进行下个语句执行
15
            }
16
            // 定位到报错项
17
            dom.$el.scrollIntoView({
18
              block: 'center',
19
              behavior: 'smooth',
20
            });
21
          }
22
          // 页面提示未通过校验字段项，
23
          this.$message.error(errorArr[0]);
24
        }
25
      });
26
    },

5. 拓展（踩坑…）#

由于页面比较复杂分了好几个子组件，而且子组件中都有需要校验的表单项，在父组件保存表单前，需要调用各个子组件的表单校验方法，发现el-form 的 validate 方法不能返会校验失败还是校验成功

错误代码示范:

1
// 子组件代码
2
   verifyForm() {
3
      this.$refs.basicInfoRule.validate(valid => {
4
        if (valid) {
5
          // 校验通过
6
          return true
7
        } else {
8
          // 校验不通过
9
          return false
10
        }
11
      })
12
    },
13

14
    // 父组件代码
15
    // 校验子组件表单（通过子组件绑定的ref来调用子组件的校验方法）
16
    async handleVerify() {
17
      if (
18
        !(await this.$refs.basicInfo?.verifyForm()) ||
19
        !(await this.$refs.priceSetting?.verifyForm())
20
      ) {
21
        this.$message.warning('请完善表单必填项')
22
        return false
23
      }
24
      return true
25
    },
26
    // 保存
27
      async saveMainDetail() {
28
      try {
29
        if (!(await this.handleVerify())) return
30
        } catch (e) {}

上述代码在父组件里面不能获取到组件的校验状态，子组件换一个写法就行了

正确代码示范：
使用 Promise 来返回表单的是否校验成功状态能在父组件成功拿到了

1
// 子组件代码
2
 verifyForm() {
3
      return new Promise((resolve, reject) => {
4
        this.$refs.basicInfoRule.validate(valid => {
5
          if (valid) {
6
            console.log(valid, '校验通过')
7
            resolve(true)
8
          } else {
9
            console.log(valid, '校验不通过')
10
            reject(new Error())
11
          }
12
        })
13
      })
14
    }