方案

動態(tài)計算定位，fixed于失敗項附近，并定時消失，多個提示一同顯示。

遇到問題

當(dāng)表單處于dialog中，并且表單高度大于dialog高度，驗證失敗項又剛好在被overflow隱藏的部分，需要對這部分提示做特殊處理，暫且處理為不顯示這部分提示。問題如圖：

解決問題

• 判斷是否處在dialog中
• 判斷驗證失敗項是否在overflow隱藏部分

判斷是否處在dialog中

function nodeParents (elm, cls) {let parent = elm.parentNodewhile (parent && !parent.classList.contains(cls)) {parent = parent.parentNode}return parent }

判斷驗證失敗項是否在overflow隱藏部分

function visibleInDialog (elm, parent) {const rect1 = elm.getBoundingClientRect()const rect2 = parent.getBoundingClientRect()return rect1.bottom < rect2.bottom && rect1.top > rect2.top }

最終

const dialog = nodeParents(elm, 'dialog') if (dialog && visibleInDialog(elm, dialog) || !dialog) {errorTip(tip) }

總結(jié)

以上是生活随笔為你收集整理的表单验证失败提示方案（自用）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。