使用HTML5和CSS3表單驗證功能

發(fā)布時間：2017-05-05 15:15:44 作者：佚名

我要評論

這篇文章主要介紹了使用HTML5和CSS3表單驗證功能,需要的朋友可以參考下

客戶端驗證是網(wǎng)頁客戶端程序最常用的功能之一，我們之前使用了各種各樣的js庫來進(jìn)行表單的驗證。HTML5其實早已為我們提供了表單驗證的功能。至于為啥沒有流行起來估計是兼容性的問題還有就是樣式太丑陋了吧。

下面我們將來一步一步創(chuàng)造一個HTML5和CSS3的表單驗證，只使用HTML和CSS。

完成后的如下：

第一步：整理驗證字段和類型

首先我們需要如下幾個字段：

姓名(full name)
電話號碼(phone number)
郵箱地址(email address)
網(wǎng)址(website)

在用戶輸入一些信息后，我們需要校驗用戶的信息是否正確，避免錯誤數(shù)據(jù)和欺騙性的數(shù)據(jù)傳遞到服務(wù)器。

在HTML5的新規(guī)范中，input輸入框提供了多種輸入類型比如：tel、email、number、range、color等，這些類型在桌面客戶端中一般體現(xiàn)不是很明顯，如果在移動端鍵盤上面體現(xiàn)的會更明顯。比如number在移動端鍵盤會自動切換為純數(shù)字，email鍵盤會自動切換帶有@的鍵盤。

第二步：確定表單樣式

我們還需要確定表單最終的樣式風(fēng)格，一般這個工作來至于設(shè)計師。這里我在dribbble上面找了一個表單的樣式作為這次的demo風(fēng)格。

第三步：模板代碼

使用標(biāo)準(zhǔn)的HTML5申明代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Form Validation</title>
</head>
<body>
</body>
</html>

第四步：創(chuàng)建表單

創(chuàng)建一個基本的form表單元素，這里我們不提交任何數(shù)據(jù)只是一個演示，所以form不會進(jìn)行提交。

<form action="" onsubmit="return false">
</form>

第五步：創(chuàng)建表單元素

表單元素一共有如下元素組成：

ul
li
label
input
span

ul和li元素用于排版布局，用于分割表單元素和布局。label用于表單的字段提示文字。input用于用戶輸入數(shù)據(jù)。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表單結(jié)構(gòu)中，我們已經(jīng)增加了一個span標(biāo)簽，比如name字段中我們增加了一個<span class="icon-name"></span>標(biāo)簽?，F(xiàn)在給他加上樣式用于顯示校驗字段的狀態(tài)。

li span {
  display: block;
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 28px;
}
/*默認(rèn)的是一個微笑的表情*/
li span::before {
  content: '😐';
}
/*我們也可根據(jù)類名定義一些其他的表情*/
.icon-name::before {
  content: '😐';
}
.icon-phone::before {
  content: '📞';
}
.icon-email::before {
  content: '📨';
}
.icon-website::before {
  content: '🌐';
}

增加emoji提示樣式如下

第八步：:invalid和:valid偽類

:valid偽類會匹配滿足校驗規(guī)則的表單元素，:invalid偽類會匹配不滿足規(guī)則的表單元素。

根據(jù)這兩個規(guī)則我們可以修改滿足和不滿足規(guī)則對應(yīng)的emoji表情。

/*不滿足規(guī)則增樣式*/
input:focus:invalid {
  border-bottom: 1px solid red;
}
input:focus:invalid + span::before {
  content: '😟';
}
/*滿足規(guī)則樣式*/
input:valid,
input:focus:valid {
  border-bottom: 1px solid #11b51d;
}
input:focus:valid + span::before,
input:valid + span::before {
  content: '😀';
}

完成代碼如下