使用HTML5和CSS3表單驗證功能

2024-07-11 08:41:52

字體：大中小

來源：轉載

供稿：網友

客戶端驗證是網頁客戶端程序最常用的功能之一，我們之前使用了各種各樣的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: '😐';}/*我們也可根據類名定義一些其他的表情*/.icon-name::before {  content: '😐';}.icon-phone::before {  content: '📞';}.icon-email::before {  content: '📨';}.icon-website::before {  content: '🌐';}

增加emoji提示樣式如下

第八步：:invalid和:valid偽類

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

根據這兩個規則我們可以修改滿足和不滿足規則對應的emoji表情。

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

完成代碼如下