純CSS3實現不錯的表單驗證效果的代碼分享

這是補充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的使用，知識點雖小，但效果卻不錯，每次學習都有新發現，慢慢積累。

<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>

• 
  

* {    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;}

• 
  

input:invalid:required {    background-image: url('nor.png');    box-shadow: 0 0 5px #f0bb18;    border: 2px solid #f0bb18;}

• 
  

input:focus:invalid {    background-image: url('warn.png');    box-shadow: 0 0 5px #b01212;    border: 2px solid #b01212;}

• 
  

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;}

• 
  

<form novalidate>    ...</form>

• 
  

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

• 
  

<form>    <input oninput="check()" type="tel" id="tel"></form><script> function check() { tel = document.querySelector('#tel'); tel.setCustomValidity('請輸入正確的11位電話號碼'); }</script>

• 
  

tel = document.querySelector('#tel');console.log( tel.validity )

• 
  

function check( el ) {    var validity = el.validity;    if ( validity.valueMissing ) {        el.setCustomValidity('該欄位為必填內容');    } else if ( validity.patternMismatch ) {        el.setCustomValidity('輸入內容不符合格式');    } else {        el.setCustomValidity('輸入有誤');    }}

• 
  

console.log( el.validationMessage )// "請填寫此欄位。"

•