el-form必填项没有填写时自动滑动到填写想

原创于 2022-11-04 17:17:18 发布 · 576 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种实现表单验证的方法，并在验证失败时自动聚焦到首个出错的输入框，提升用户体验。通过使用Element UI框架的组件，配合自定义的验证逻辑，实现了这一功能。

废话不多说，冲冲冲，直接上代码

 this.$refs.postForm.validate(async(valid) => {
        if (!valid) {
          this.$message.error('表单中包含错误，请检查')
          setTimeout(() => {
            let item = this.$refs.postForm.$el.getElementsByClassName('el-form-item is-error')
            if (item.length) {
              item = item[0].getElementsByClassName('el-input__inner')
              item.length && item[0].focus && item[0].focus()
            }
          }, 100)
          return false
        }
        }