這是補充HTML5基礎知識的系列內容，其他為：
- 一、HTML5-- 新的結構元素
- 二、HTML5-- figure、time、details、mark
- 三、HTML5-- details活學活用
- 四、HTML5-- 現存元素的變化
- 五、HTML5 -- Web表單
今天繼續學習Web表單相關的內容，不過今天重點落實到實戰中，利用HTML5表單與CSS3-UI實現一款不錯的表單效果。
效果可看下面動圖：
如效果演示，我們今天就通過簡單幾行CSS就可實現。
預備知識
- 1、HTML5新增的表單類型：tel、email、url（上一篇有介紹）
- 2、HTML5表單基本驗證：required屬性
- 3、HTML5表單自定義驗證規則：pattern屬性
主要介紹內容
- 1、CSS3用戶接口模塊中的偽類
- 2、自定義錯誤消息
正文
既然是表單，我們得有基礎的表單HTML結構，下面是我創建的結構，三個表單都是必填字段，並且對於tel一欄我們設置了自定義的驗證規則：必須是11位數字。
<form>
<ol>
<li>
<label for="tel">Tel:</label>
<input type="tel" required name="" pattern="\d{11}" id="tel">
</li>
<li>
<label for="url">Website:</label>
<input type="url" required name="" id="url">
</li>
<li>
<label for="email">Email:</label>
<input type="email" required name="" id="email">
</li>
<li>
<input type="submit" name="" value="Send the form">
</li>
</ol>
</form>
創建完成后的效果如下，感覺和我們想要的效果差別還很大。本是同根生啊，一樣的HTML，咋這個這么丑。
別急，下面我們慢慢給它穿衣服。
下面使用簡單的規則，對該表單進行美化：
* {
margin: 0;
font: 13px tahoma, verdana, sans-serif;
padding: 0;
}
ol {
width: 400px;
margin: 50px;
}
li {
clear: both;
list-style-type: none;
margin: 0 0 10px;
}
li:nth-last-child(1) {
text-align: center;
}
label {
display: block;
float: left;
margin: 0 10px 0 0;
padding: 5px;
text-align: right;
width: 100px;
}
input {
border-radius: 5px;
padding: 5px 5px 5px 30px;
width: 155px;
}
input:focus {
outline: none;
}
現在效果已經很不錯了，不過離我們的目標還有一段距離，現在我們該考慮下，表單驗證的各個環節，輸入框應該長什么樣。上面的示例中有三種情況：
- 1、輸入框未激活時
- 2、輸入框激活（輸入不正確）
- 3、輸入框激活（輸入正確）
針對上面的三個情況，這里進行了三個描述：
- 1、未激活時，必填表單顯示橙色提醒
- 2、激活時，輸入不正確，表單為深紅色提示
- 3、激活時，輸入正確，表單為綠色通過
與之相隨的是三個圖標的變化。
當我們定義把表單狀態定義完成以后其實我們心里已經大致有個效果了，代碼是實現效果的工具，下面我們看下如何定義：
首先是輸入框未激活，此時的輸入框狀態為invalid以及required：
input:invalid:required {
background-image: url('nor.png');
box-shadow: 0 0 5px #f0bb18;
border: 2px solid #f0bb18;
}
其次是輸入框激活時，但還沒有輸入成功，此時輸入框狀態為focus以及invalid：
input:focus:invalid {
background-image: url('warn.png');
box-shadow: 0 0 5px #b01212;
border: 2px solid #b01212;
}
最后是輸入框激活時，表單輸入成功，這時候輸入框狀態為valid：
input:valid {
background-image: url('suc.png');
border: 2px solid #7ab526;
}
最后，對提交按鈕進行修飾：
input[type="submit"] {
background: #7ab526;
border: none;
box-shadow: 0 0 5px #7ab526;
color: #fff;
cursor: pointer;
font-weight: bold;
padding: 7px;
width: 150px;
}
怎么樣，還不錯吧。
這里不先介紹所有的新CSS選項，更多的CSS選項需要繼續探索，我們僅僅使用了幾個就可以實現這么不錯的效果。
我們使用的偽類如下：
- :valid —— 表單元素在內容符合元素類型並驗證通過后，獲得該類
- :invalid —— 如果表單元素內容有誤，它將獲得該類
- :required —— 任何擁有required屬性的表單元素應用了此類
其他拓展
1、不觸發瀏覽器驗證
如果你不希望瀏覽器為表單驗證，使用novalidate屬性或formnovalidate屬性可以關閉瀏覽器驗證。
其中novalidate是表單form所具有的屬性，提交表單時會忽略任何錯誤提示和空白域。
<form novalidate>
...
</form>
formnovalidate是input元素的屬性，可以為單個表單元素設置該屬性。
<form>
...
<input type="submit" formnovalidate>
</form>
上述表單同樣不會觸發驗證。
2、自定義錯誤提示內容
在上面的例子中可以看到，瀏覽器會對我們的表單進行驗證，在這個過程中會彈出錯誤消息。而隨着輸入的不同，這些驗證消息也是不一樣的。
我們雖然不能更改提示框的樣式，但我們可以使用JavaScript的setCustomValidity()函數修改錯誤文字：
<form>
<input oninput="check()" type="tel" id="tel">
</form>
<script>
function check() {
tel = document.querySelector('#tel');
tel.setCustomValidity('請輸入正確的11位電話號碼');
}
</script>
那么，現在當我們輸入的時候，提示內容就變成我們自定義的了：
現在還有一個問題，瀏覽器的提示是不一樣的，為空時的提示和錯誤的提示文案不一樣，這樣我們應該怎么分開處理呢？
這時候就需要validity來查看當前的驗證狀態：
tel = document.querySelector('#tel');
console.log( tel.validity )
如上圖所示，當前驗證狀態為：customError，就是說用戶自定義的驗證失敗，我們可以根據這些狀態來動態的更新提示信息。如果最終驗證成功，其中的valid將變為true。
function check( el ) {
var validity = el.validity;
if ( validity.valueMissing ) {
el.setCustomValidity('該字段為必填內容');
} else if ( validity.patternMismatch ) {
el.setCustomValidity('輸入內容不符合格式');
} else {
el.setCustomValidity('輸入有誤');
}
}
上述只是演示，實際場景時刻替換自己的提示內容。
最后，可以通過validationMessage來獲取當前的錯誤提示信息：
console.log( el.validationMessage )
// "請填寫此字段。"
總結
在本次學習中做了一個簡單且最常見的Demo，另外介紹了一些關於表單驗證修飾的細節，雖然這些東西五年前就已經有了，但補充基礎知識什么時候都不算晚。
今天學習了valid、invalid、required的使用，知識點雖小，但效果卻不錯，每次學習都有新發現，慢慢積累。