純CSS3實現不錯的表單驗證效果

這是補充HTML5基礎知識的系列內容，其餘爲：

• 1、HTML5-- 新的結構元素
• 2、HTML5-- figure、time、details、mark
• 3、HTML5-- details活學活用
• 4、HTML5-- 現存元素的變化
• 5、HTML5 -- Web表單

---

今天繼續學習Web表單相關的內容，不過今天重點落實到實戰中，利用HTML5表單與CSS3-UI實現一款不錯的表單效果。

效果可看下面動圖：

如效果演示，咱們今天就經過簡單幾行CSS就可實現。

預備知識

• 一、HTML5新增的表單類型：tel、email、url（上一篇有介紹）
• 二、HTML5表單基本驗證：required屬性
• 三、HTML5表單自定義驗證規則：pattern屬性

主要介紹內容

• 一、CSS3用戶接口模塊中的僞類
• 二、自定義錯誤消息

正文

既然是表單，咱們得有基礎的表單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;
}

如今效果已經很不錯了，不過離咱們的目標還有一段距離，如今咱們該考慮下，表單驗證的各個環節，輸入框應該長什麼樣。上面的示例中有三種狀況：

• 一、輸入框未激活時
• 二、輸入框激活（輸入不正確）
• 三、輸入框激活（輸入正確）

針對上面的三個狀況，這裏進行了三個描述：

• 一、未激活時，必填表單顯示橙色提醒
• 二、激活時，輸入不正確，表單爲深紅色提示
• 三、激活時，輸入正確，表單爲綠色經過

與之相隨的是三個圖標的變化。

當咱們定義把表單狀態定義完成之後其實咱們內心已經大體有個效果了，代碼是實現效果的工具，下面咱們看下如何定義：

首先是輸入框未激活，此時的輸入框狀態爲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屬性的表單元素應用了此類

其餘拓展

一、不觸發瀏覽器驗證

若是你不但願瀏覽器爲表單驗證，使用novalidate屬性或formnovalidate屬性能夠關閉瀏覽器驗證。

其中novalidate是表單form所具備的屬性，提交表單時會忽略任何錯誤提示和空白域。

<form novalidate>
    ...
</form>

formnovalidate是input元素的屬性，能夠爲單個表單元素設置該屬性。

<form>
    ...
    <input type="submit" formnovalidate>
</form>

上述表單一樣不會觸發驗證。

二、自定義錯誤提示內容

在上面的例子中能夠看到，瀏覽器會對咱們的表單進行驗證，在這個過程當中會彈出錯誤消息。而隨着輸入的不一樣，這些驗證消息也是不同的。

咱們雖然不能更改提示框的樣式，但咱們可使用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的使用，知識點雖小，但效果卻不錯，每次學習都有新發現，慢慢積累。