資訊專欄INFORMATION COLUMN
摘要：方案動(dòng)態(tài)計(jì)算定位，于失敗項(xiàng)附近，并定時(shí)消失，多個(gè)提示一同顯示。遇到問(wèn)題當(dāng)表單處于中，并且表單高度大于高度，驗(yàn)證失敗項(xiàng)又剛好在被隱藏的部分，需要對(duì)這部分提示做特殊處理，暫且處理為不顯示這部分提示。
方案
動(dòng)態(tài)計(jì)算定位，fixed于失敗項(xiàng)附近，并定時(shí)消失，多個(gè)提示一同顯示。
遇到問(wèn)題當(dāng)表單處于dialog中，并且表單高度大于dialog高度，驗(yàn)證失敗項(xiàng)又剛好在被overflow隱藏的部分，需要對(duì)這部分提示做特殊處理，暫且處理為不顯示這部分提示。問(wèn)題如圖：
解決問(wèn)題判斷是否處在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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99945.html
摘要：前言前端的童鞋在寫頁(yè)面時(shí)都不可避免的總會(huì)踩到表單驗(yàn)證這個(gè)坑這時(shí)候我們就要跪了因?yàn)橐獙懸欢褋?lái)檢查但是自從出現(xiàn)后很多常見的表達(dá)驗(yàn)證它都已經(jīng)幫我們實(shí)現(xiàn)了讓我們減輕了很多負(fù)擔(dān)就好像下面的郵箱地址驗(yàn)證郵箱郵箱驗(yàn)證是自身支持的但是我們要驗(yàn)證的場(chǎng)景和情 前言 ????前端的童鞋在寫頁(yè)面時(shí), 都不可避免的總會(huì)踩到表單驗(yàn)證這個(gè)坑. 這時(shí)候, 我們就要跪了, 因?yàn)橐獙懸欢裫s來(lái)檢查. 但是自從H5出現(xiàn)后,...
摘要：介紹在后端項(xiàng)目里比如我們的框架對(duì)于表單驗(yàn)證有自己的一套機(jī)制他將驗(yàn)證集成在我們只需要在我們的方法中依賴注入我們自己實(shí)例化后的驗(yàn)證類當(dāng)然也可以直接去在方法里去驗(yàn)證表單數(shù)據(jù)而在我們的前端的項(xiàng)目里也就是在我們的項(xiàng)目里也有比較好的驗(yàn)證解決方案也就是這 介紹 在后端項(xiàng)目里 比如我們的Laravel框架 對(duì)于表單驗(yàn)證有自己的一套validation機(jī)制 他將驗(yàn)證集成在FormRequest 我們只...
摘要：注意約束驗(yàn)證不支持表單中的元素若想基于表單的驗(yàn)證結(jié)果來(lái)改變按鈕的樣式，可以使用偽類。約束驗(yàn)證的語(yǔ)法下列語(yǔ)法中的條目用于為表單數(shù)據(jù)指定約束。這些特性指定了當(dāng)表單提交時(shí)不做驗(yàn)證。在表單相關(guān)元素上屬性，如果元素的約束沒(méi)有被符合則值為。 相對(duì)于 HTML4 來(lái)說(shuō)，HTML5中的元素與特性提供更大程度上的語(yǔ)義標(biāo)記，同時(shí)還刪除了大量在 HTML4 中因?yàn)槟_本與樣式緣故而存在的冗余元素。通過(guò)讓表單在...
閱讀 3794·2021-11-17 09:33
閱讀 2011·2021-10-26 09:51
閱讀 1527·2021-09-29 09:44
閱讀 1678·2019-08-30 15:55
閱讀 1447·2019-08-30 15:52
閱讀 2325·2019-08-30 15:43
閱讀 3432·2019-08-29 17:00
閱讀 2302·2019-08-29 16:23
