資訊專欄INFORMATION COLUMN
摘要：方案動態(tài)計算定位，于失敗項附近，并定時消失，多個提示一同顯示。遇到問題當表單處于中，并且表單高度大于高度，驗證失敗項又剛好在被隱藏的部分，需要對這部分提示做特殊處理，暫且處理為不顯示這部分提示。
方案
動態(tài)計算定位，fixed于失敗項附近，并定時消失，多個提示一同顯示。
遇到問題當表單處于dialog中，并且表單高度大于dialog高度，驗證失敗項又剛好在被overflow隱藏的部分，需要對這部分提示做特殊處理，暫且處理為不顯示這部分提示。問題如圖：
解決問題判斷是否處在dialog中
判斷驗證失敗項是否在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://www.ezyhdfw.cn/yun/99945.html
摘要：前言前端的童鞋在寫頁面時都不可避免的總會踩到表單驗證這個坑這時候我們就要跪了因為要寫一堆來檢查但是自從出現(xiàn)后很多常見的表達驗證它都已經(jīng)幫我們實現(xiàn)了讓我們減輕了很多負擔就好像下面的郵箱地址驗證郵箱郵箱驗證是自身支持的但是我們要驗證的場景和情 前言 ????前端的童鞋在寫頁面時, 都不可避免的總會踩到表單驗證這個坑. 這時候, 我們就要跪了, 因為要寫一堆js來檢查. 但是自從H5出現(xiàn)后,...
摘要：介紹在后端項目里比如我們的框架對于表單驗證有自己的一套機制他將驗證集成在我們只需要在我們的方法中依賴注入我們自己實例化后的驗證類當然也可以直接去在方法里去驗證表單數(shù)據(jù)而在我們的前端的項目里也就是在我們的項目里也有比較好的驗證解決方案也就是這 介紹 在后端項目里 比如我們的Laravel框架 對于表單驗證有自己的一套validation機制 他將驗證集成在FormRequest 我們只...
閱讀 3993·2021-11-17 09:33
閱讀 2187·2021-10-26 09:51
閱讀 1627·2021-09-29 09:44
閱讀 1780·2019-08-30 15:55
閱讀 1520·2019-08-30 15:52
閱讀 2406·2019-08-30 15:43
閱讀 3504·2019-08-29 17:00
閱讀 2402·2019-08-29 16:23
