開始使用HTML5和CSS3驗證表單

時間 2020-06-10

標籤開始使用 html5 html css3 css 驗證表單欄目 HTML5 简体版

原文原文鏈接

使用HTML5和CSS3驗證表單

客戶端驗證是網頁客戶端程序最經常使用的功能之一，咱們以前使用了各類各樣的js庫來進行表單的驗證。HTML5其實早已爲咱們提供了表單驗證的功能。至於爲啥沒有流行起來估計是兼容性的問題還有就是樣式太醜陋了吧。css

下面咱們未來一步一步創造一個HTML5和CSS3的表單驗證，只使用HTML和CSS。html

完成後的以下：
html5

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

首先咱們須要以下幾個字段：css3

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

在用戶輸入一些信息後，咱們須要校驗用戶的信息是否正確，避免錯誤數據和欺騙性的數據傳遞到服務器。git

在HTML5的新規範中，input輸入框提供了多種輸入類型好比：tel、email、number、range、color等，這些類型在桌面客戶端中通常體現不是很明顯，若是在移動端鍵盤上面體現的會更明顯。好比number在移動端鍵盤會自動切換爲純數字，email鍵盤會自動切換帶有@的鍵盤。github

第二步：肯定表單樣式

咱們還須要肯定表單最終的樣式風格，通常這個工做來至於設計師。這裏我在dribbble上面找了一個表單的樣式做爲此次的demo風格。
web

第三步：模板代碼

使用標準的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>

第五步：建立表單元素

表單元素一共有以下元素組成：flex

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代碼完成代碼以下：

See the Pen html5 validation pure form by jiangzhu (@tudou) on CodePen.

第六步：增長樣式

完成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代碼完成代碼以下：

See the Pen html5 validation pure form base style by jiangzhu (@tudou) on CodePen.

第七步：增長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提示樣式以下

See the Pen html5 validation pure form base style and emoji by jiangzhu (@tudou) on CodePen.

第八步：: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: '😀';
}

完成代碼以下

See the Pen html5 validation by jiangzhu (@tudou) on CodePen.

總結：
HTML5提供了css鉤子爲表單元素，也提供了一些js的接口跟進一步詳細的控制表單的校驗和錯誤提示。若是須要更個性化的校驗和提示方式可使用js接口。

參考鏈接：