資訊專欄INFORMATION COLUMN
摘要：方案動態(tài)計(jì)算定位，于失敗項(xiàng)附近，并定時消失，多個提示一同顯示。遇到問題當(dāng)表單處于中，并且表單高度大于高度，驗(yàn)證失敗項(xiàng)又剛好在被隱藏的部分，需要對這部分提示做特殊處理，暫且處理為不顯示這部分提示。
方案
動態(tài)計(jì)算定位，fixed于失敗項(xiàng)附近，并定時消失，多個提示一同顯示。
遇到問題當(dāng)表單處于dialog中，并且表單高度大于dialog高度，驗(yàn)證失敗項(xiàng)又剛好在被overflow隱藏的部分，需要對這部分提示做特殊處理，暫且處理為不顯示這部分提示。問題如圖：
解決問題判斷是否處在dialog中
判斷驗(yàn)證失敗項(xiàng)是否在overflow隱藏部分
function nodeParents (elm, cls) {
let parent = elm.parentNode
while (parent && !parent.classList.contains(cls)) {
parent = parent.parentNode
}
return parent
}
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)
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99945.html
摘要：前言前端的童鞋在寫頁面時都不可避免的總會踩到表單驗(yàn)證這個坑這時候我們就要跪了因?yàn)橐獙懸欢褋頇z查但是自從出現(xiàn)后很多常見的表達(dá)驗(yàn)證它都已經(jīng)幫我們實(shí)現(xiàn)了讓我們減輕了很多負(fù)擔(dān)就好像下面的郵箱地址驗(yàn)證郵箱郵箱驗(yàn)證是自身支持的但是我們要驗(yàn)證的場景和情 前言 ????前端的童鞋在寫頁面時, 都不可避免的總會踩到表單驗(yàn)證這個坑. 這時候, 我們就要跪了, 因?yàn)橐獙懸欢裫s來檢查. 但是自從H5出現(xiàn)后,...
摘要：介紹在后端項(xiàng)目里比如我們的框架對于表單驗(yàn)證有自己的一套機(jī)制他將驗(yàn)證集成在我們只需要在我們的方法中依賴注入我們自己實(shí)例化后的驗(yàn)證類當(dāng)然也可以直接去在方法里去驗(yàn)證表單數(shù)據(jù)而在我們的前端的項(xiàng)目里也就是在我們的項(xiàng)目里也有比較好的驗(yàn)證解決方案也就是這 介紹 在后端項(xiàng)目里 比如我們的Laravel框架 對于表單驗(yàn)證有自己的一套validation機(jī)制 他將驗(yàn)證集成在FormRequest 我們只...
閱讀 3807·2021-11-17 09:33
閱讀 2025·2021-10-26 09:51
閱讀 1541·2021-09-29 09:44
閱讀 1693·2019-08-30 15:55
閱讀 1457·2019-08-30 15:52
閱讀 2338·2019-08-30 15:43
閱讀 3444·2019-08-29 17:00
閱讀 2311·2019-08-29 16:23
