用HTML5的驗(yàn)證使浮動(dòng)輸入標(biāo)簽

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

我們?cè)谶@里做什么

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

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

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

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

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

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

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

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

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

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

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

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

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

牧羊人設(shè)計(jì)文章推薦：

HTML5和原生應(yīng)用程序和混合型的應(yīng)用
新一代網(wǎng)站制作
贏得你的聽眾使用視頻背景