用HTML5的驗證使浮動輸入標簽

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

我們在這里做什么

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

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

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

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

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

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

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

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

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

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

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

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

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

牧羊人設計文章推薦：

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