el-form表单提交自动定位到验证报错项

最新推荐文章于 2024-02-27 15:44:04 发布

原创最新推荐文章于 2024-02-27 15:44:04 发布 · 421 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

博客围绕表单操作展开，指出表单内容多，提交无反应可能是验证问题。介绍通过is-error类和scrollIntoView方法自动定位表单报错项，还强调表单提交时要做防抖操作。

由于表单内容太多，当用户填完提交后发现没任何反应，以为卡了或者程序有问题，其实是某一项的验证出问题了，当然实现方法很多（this.$message这个也是可以提示用户表单填写出了问题，个人感觉体验不好），直接上图

通过这个is-error类，我们就能找到那些地方有问题，主要是通过scrollIntoView方法

自动定位到表单报错项

moveToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName('is-error')
        if (isError.length) {
          isError[0].scrollIntoView({
            block: 'center',
            behavior: 'smooth'
          })
        }
      })
    }

表单提交操作

submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
         // 验证通过逻辑
        } else {
          console.log("error submit!!");
          // 这里回调就可以实现了
          this.moveToErr()
          return false;
        }
      });
    },