用戶端驗證是網頁用戶端程式最常用的功能之一，我們之前使用了各種各樣的js庫來進行表單的驗證。HTML5其實早已為我們提供了表單驗證的功能。至於為啥沒有流行起來估計是相容性的問題還有就是樣式太醜陋了吧。
下面我們將來一步一步創造一個HTML5和CSS3的表單驗證，只使用HTML和CSS。
完成後的如下：
第一步：整理驗證欄位和類型
首先我們需要如下幾個欄位：
姓名(full name)
電話號碼(phone number)
郵箱地址(email address)
網址(website)
在使用者輸入一些資訊後，我們需要校正使用者的資訊是否正確，避免錯誤資料和詐騙資料傳遞到伺服器。
在HTML5的新規範中，input輸入框提供了多種輸入類型比如：tel、email、number、range、color等，這些類型在案頭用戶端中一般體現不是很明顯，如果在移動端鍵盤上面體現的會更明顯。比如number在移動端鍵盤會自動切換為純數字，email鍵盤會自動切換帶有@的鍵盤。
第二步：確定表單樣式
我們還需要確定表單最終的樣式風格，一般這個工作來至於設計師。這裡我在dribbble上面找了一個表單的樣式作為這次的demo風格。
第三步：模板代碼
使用標準的HTML5申明代碼
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML5 Form Validation</title></head><body></body></html>
第四步：建立表單
建立一個基本的form表單元素，這裡我們不提交任何資料只是一個示範，所以form不會進行提交。
<form action="" onsubmit="return false"></form>
第五步：建立表單元素
表單元素一共有如下元素組成：
ul
li
label
input
span
ul和li元素用於排版布局，用於分割表單元素和布局。label用於表單的欄位提示文字。input用於使用者輸入資料。span用於使用emoji提示使用者欄位是否填寫正確。
<ul> <li> <label for="name">FULL NAME</label> <input type="text" id="name" name=" name" placeholder="請輸入姓名"/> <span class="icon-name"></span> </li></ul>
form表單html程式碼完成代碼如下：
第六步：增加樣式
完成form元素的編寫，緊著著完善一下它的樣式，讓它看起來更美一些。
body { display: flex;}form { padding: 0 10%; width: 100%; margin: auto;}ul { list-style-type: none; padding: 0; margin: 0;}li { position: relative; margin-bottom: 20px;}label { color: #333; display: block; font-size: 12px;}input { width: 100%; outline: none; border: none; padding: 0.5em 0; font-size: 14px; color: black; position: relative; border-bottom: 1px solid #d4d4d4;}input:-moz-placeholder { color: #d4d4d4;}input::-webkit-input-placeholder { color: #d4d4d4;}li span { display: block; position: absolute; right: 0; top: 10px; font-size: 28px;}button { cursor: pointer; border: 1px solid #999; border-radius: 4px; padding: 10px 20px; margin-top: 10px; background: #fff;}
css程式碼完成代碼如下：
第七步：增加EMOJI提示
在每個form表單結構中，我們已經增加了一個span標籤，比如name欄位中我們增加了一個<span class="icon-name"></span>標籤。現在給他加上樣式用於顯示校正欄位的狀態。
li span { display: block; position: absolute; right: 0; top: 10px; font-size: 28px;}/*預設的是一個微笑的表情*/li span::before { content: 'Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
