用HTML5的驗證使浮動輸入標(biāo)簽

TL；DR取代你的JavaScript驗證HTML5的驗證。這比你想象的要容易，并且給你一噸的標(biāo)記和樣式的控制。試試這個演示：

我們在這里做什么

所以你需要驗證的一種形式。你的服務(wù)器端驗證做正確的事情開始。然后，如果你是一個好的網(wǎng)頁設(shè)計師，你加入一些客戶端驗證你的用戶得到反饋是否填寫表格不正確或。如果你真的是一個好的網(wǎng)頁設(shè)計師，你甚至可能使瞬時值反饋，這樣用戶意識到，當(dāng)它成為一個有效的電子郵件地址，他們進入一個有效的電子郵件地址。

你最喜歡的jQuery庫。也許你甚至不夠冷靜，用普通的JavaScript庫。

你添加一些額外的標(biāo)記。重新風(fēng)格的一些東西…添加一些JavaScript驗證規(guī)則。連接到服務(wù)器通過Ajax JavaScript。打破你的頭靠在鍵盤上幾次，因為你沒有做的這幾個月，要找新的JavaScript驗證庫做事情到底怎么了…等等。

你得到的圖片。就不好玩了。

如果你可以跳過所有的JavaScript的東西，驗證HTML5驗證器和CSS屬性？

HTML5的表單驗證是什么？
粗略的講：你添加的屬性一樣要求或類型=“電子郵件”以<輸入>田野和你的瀏覽器沒有休息。
去嘗試提交表單在這CodePen演示沒有內(nèi)容。然后提交它沒有一個有效的電子郵件地址：
正則表達(dá)式模式

你可能已經(jīng)注意到，你可以輸入一個電子郵件一樣一個@。顯然你需要一個真正的電子郵件地址，所以通過指定確切的模式，我們的數(shù)據(jù)必須匹配，我們可以驗證什么進入。讓我們確保它符合其一端有一點和兩個或三個字符的模式。我們可以這樣使用模式屬性和正則表達(dá)式。

如果你對學(xué)習(xí)正則表達(dá)式，你必須嘗試。正則表達(dá)式是極其強大的，在每一個類型的節(jié)目你會做。
我討厭在復(fù)雜的正則表達(dá)式，所以我翻譯為“電子郵件regex”（因為我相信這已經(jīng)被解決了），找到一個經(jīng)常expressions.info。這是我們的正則表達(dá)式在regex101.com（測試您的正則表達(dá)式的一個非常有用的資源）。

^ [就]。_ % + + @ [就] +，-。[A-Za-z] { 2 } $
如果你讀了一點關(guān)于模式你會發(fā)現(xiàn)作者排除小寫的比賽因為他們期望你用不區(qū)分大小寫的標(biāo)志。HTML5的輸入模式不接受旗幟以小寫字母我們需要添加大寫和小寫的范圍（例如a-za-z）。你可以閱讀什么圖案的每個部分是在右邊面板中做。
為了使我們的驗證錯誤的把其他的東西比“格式錯誤！“我們可以指定一個頭銜一個驗證錯誤的屬性，像這樣：

現(xiàn)在嘗試電子郵件輸入在本演示：
別擔(dān)心，你不會有對每個輸入你所寫出的瘋狂模式。大多數(shù)時候你只會想有什么要求，確保它是一個特定的數(shù)據(jù)類型。例如，超過5個數(shù)可能看起來像<輸入type=“數(shù)”=“5”>所需最小。
記住，不是所有的瀏覽器都支持各種驗證屬性。例如，F(xiàn)irefox不支持大長度。模式有很好的支持雖然，你總是可以復(fù)制功能。大長度可以復(fù)制模式=”。{ 3 }”在 哪兒三然而，長期需要。
如果你不能找到一個模式，你的舊的JavaScript庫的訪問，你可以通過瀏覽他們的源代碼中找到它，因為最終的JavaScript庫是完全相同的正則表達(dá)式模式為我們匹配。

即時反饋
如果我們不輸入會顯示一些指示時，它是有效的很好嗎？令人高興的是，有一個：有效對于CSS選擇器。也有一個：無效選擇器。在本演示中輸入你的名字：
你會發(fā)現(xiàn)明顯的警告，無效的方式出現(xiàn)之前，我們所接觸的輸入。
你可能會想做這樣的事情：無效：不（：空）但它不會工作，因為瀏覽器是愚蠢的總是把表單元素的空。
我們可以用新的做一些掛羊頭賣狗肉占位符所示：在下面的演示顯示偽選擇器，但瀏覽器支持為占位符所示：是可怕的，沒有一個現(xiàn)代polyfill呢。真倒霉.
現(xiàn)在，我們添加一些JavaScript切換類取決于如果輸入為空或不。這里的工作演示：

它的華麗
我對這種方法最喜歡的部分是你在你的每一個點完成CSS控制。
通過推進下<輸入>我們獲得我們相鄰?fù)x擇器空蕩蕩的。類我們可以創(chuàng)建一個虛假的精美幻燈片占位符的方式盡快輸入不再是空的。這里的一個例子：
如果在<輸入>冒犯你的情感或不容易，你可以修改JavaScript添加空類的<標(biāo)簽>相反。然后它只是調(diào)整CSS一點。這里的一個例子，這樣做：
驗證類也在<形>所以你真的可以去元素與風(fēng)格控制螺母。
有沒有什么限制，你可以用這種方法。一些想法：
•添加驗證圖標(biāo)，淡入/淡出。
•震動輸入如果用戶unfocuses是無效的。
•昏暗的輸入為他們填寫正確。

瀏覽器支持
•在現(xiàn)代瀏覽器和IE10 +好。
•IE9不支持驗證偽選擇器，所以你不會造型，但形式還是功能很好。
可能的解釋
有沒有辦法驗證消息的風(fēng)格。瀏覽器禁用那些風(fēng)格的能力。我并不認(rèn)為這是壞事，因為人們會用這些驗證方式。事實上，這可能是為什么瀏覽器決定削減我們對它們的訪問?，F(xiàn)在他們都是標(biāo)準(zhǔn)化的。
他們還指出，頁面流，所以你不必?fù)?dān)心他們將表單元素在自己的外表。
如果你真的需要在驗證方式的完全控制，這種方法可能不適合你

創(chuàng)新互聯(lián)設(shè)計文章推薦：

成都虛擬主機_網(wǎng)頁空間
企業(yè)宣傳設(shè)計,企業(yè)宣傳印刷
安慶網(wǎng)站制作公司

新聞名稱：用HTML5的驗證使浮動輸入標(biāo)簽
URL標(biāo)題：http://www.muchs.cn/news16/21016.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、全網(wǎng)營銷推廣、微信小程序、軟件開發(fā)、企業(yè)網(wǎng)站制作、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)