【el-form】表单验证失败定位滑动到失败的位置

这篇文章主要介绍了使用el-form之表单校验自动定位到报错位置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

背景

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

需求

提交的表单过长，出现滚动条时，点击‘确定’触发表单检验后，页面看不到的表单项报错，但是用户在页面不能感知到，这时需要将滚动条滚动至校验失败项处。

实现思路

方法一：

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

方法二：

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

实现代码

方法一实现逻辑

 	// 表单校验
    verifyForm() {
      this.$refs.basicInfoRule.validate(valid => {
        if (valid) {
          // 校验通过执行的逻辑
        } else {
          // 校验不通过自动定位到不通过的表单项
          this.moveToErr()
        }
      })
    },
    // 自动定位到表单报错项
    moveToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName('is-error')
        if (isError.length) {
          isError[0].scrollIntoView({
            block: 'center',
            behavior: 'smooth'
          })
	// 这个当滑动到报错项之后自动获取输入框的焦点，方便用户直接进行输入，延迟 800ms 是因为需要都能到定位成功后在进行获取焦点体验更好一些
          setTimeout(() => {
            if (isError[0].previousElementSibling.querySelector('input')) {
              isError[0].previousElementSibling.querySelector('input').focus()
            }
          }, 800)
        }
      })
    }

方法二实现逻辑

// 子组件代码
   verifyForm() {
      this.$refs.basicInfoRule.validate(valid => {
        if (valid) {
          // 校验通过
          return true
        } else {
          // 校验不通过
          return false
        }
      })
    },
    // 父组件代码
    // 校验子组件表单（通过子组件绑定的ref来调用子组件的校验方法）
    async handleVerify() {
      if (
        !(await this.$refs.basicInfo?.verifyForm()) ||
        !(await this.$refs.priceSetting?.verifyForm())
      ) {
        this.$message.warning('请完善表单必填项')
        return false
      }
      return true
    },
    // 保存
      async saveMainDetail() {
      try {
        if (!(await this.handleVerify())) return
        } catch (e) {}    

每天记录所遇到的奇怪问题。