vue表單校驗（三）

每當看到heyui的這個表單校驗，我就一直想將element的校驗也做類似的功能，終於有了方式，雖然不是很完美，但是可以使用，能滿足要求了

實現方式 基於element-ui實現

通過表單提交時，觸發校驗，未通過的表單會添加is-error,之后滾動到對應的錯誤位置即可

頁面視圖

實現邏輯

• 觸發條件

在提交時，若是未通過則開始進行判斷，由於是依賴於is-error的class類名，因而需要等form表單錯誤的元素添加完is-error類名后再進行判斷

submitForm1 () {
  this.$refs['ruleForm'].validate(valid => {
    if (valid) {
      // 通過
    } else {
      // 需要延遲一下
      this.$nextTick(() => {
        this.scrollToTop(this.$refs['ruleForm'].$el)
      })
    }
  })
}

js邏輯

scrollToTop (node) {
  const ChildHasError = Array.from(node.querySelectorAll('.is-error'))
  if (!ChildHasError.length) throw new Error('有錯誤，但是找不到錯誤位置')
  // 找到第一個錯誤位置
  const FirstErrorNode = ChildHasError[0]

//  https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8/
  FirstErrorNode.scrollIntoView({
    behavior: "smooth"
  })
}

上述方式借助了scrollIntoView，但是有個小問題，form表單錯誤信息都是緊貼頂部，不是很符合，因而開始自己寫滾動

升級

滾動動畫

const BackToTop = (rate = 2, num = 0) => {
  const doc = document.body.scrollTop ? document.body : document.documentElement
  // 距離頂部的值
  let scrollTop = doc.scrollTop
  const top = function () {
      scrollTop = scrollTop + (num - scrollTop) / (rate || 2);
      // 臨界判斷，終止動畫
      if (scrollTop < (num + 1)) {
          doc.scrollTop = num;
          return;
      }
      doc.scrollTop = scrollTop;
      // 動畫gogogo!
      requestAnimationFrame(top);
  };
  top();
}

js邏輯升級

 scrollToTop (node) {
  const ChildHasError = Array.from(node.querySelectorAll('.is-error'))
  if (!ChildHasError.length) throw new Error('有錯誤，但是找不到錯誤位置')
  const FirstErrorNode = ChildHasError[0]

  const Top = FirstErrorNode.getBoundingClientRect().top

  // 獲取元素相對於頁面頂部的位置， 同時設置相對40px
  const scrollToTop = Top + ( window.pageYOffset || document.documentElement.scrollTop ) - ( document.documentElement.clientTop || 0 ) - 40

  scrollTop(2, scrollToTop)
}

總結

• 更多的是考慮是如何實現滾動效果
• 還有更進一步的需要，若是使用了el-scroll的組件，方式有得再繼續改變，這個后期再進行整理