element 表单校验失败定位到指定元素

 this.$refs.generateForm.validate(valid => {
            if (valid) {} else {
              console.log('表单数据校验失败')
              this.moveToErr()
            }

  

moveToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName('is-error')


        if (isError.length > 0) {
          const firstError = isError[0];

          // 检查元素及其子元素是否可获取焦点
          const focusableElements = firstError.querySelectorAll(
            'input, button, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const hasFocusableChild = focusableElements.length > 0;

          // 平滑滚动到错误元素
          firstError.scrollIntoView({
            behavior: 'smooth',
            block: 'center'
          });

          // 如果有可聚焦子元素则聚焦第一个
          if (hasFocusableChild) {
            focusableElements[0].focus();
          } else {
            console.log('没有可以聚焦的元素', firstError);
          }
        }
      })
    },

  

posted @ 2025-10-20 13:47  玉文  阅读(3)  评论(0)    收藏  举报