純H5+c3實現表單驗證
阿新 • • 發佈：2017-05-05
mail ida 網址 put 滿足 字段 address ini css3
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> 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; } li span::before { content: ‘??‘; } 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: ‘??‘; } .icon-name::before { content: ‘??‘; } .icon-phone::before { content: ‘??‘; } .icon-email::before { content: ‘??‘; } .icon-website::before { content: ‘??‘; } button { cursor: pointer; border: 1px solid #999; border-radius: 4px; padding: 10px 20px; margin-top: 10px; background: #fff; } </style> </head>
<body> <form action="" onsubmit="return false"> <ul> <li> <label for="name">FULL NAME</label> <input type="text" id="name" name=" name" placeholder="請輸入姓名" required /> <span class="icon-name"></span> </li> <li> <label for="phone">PHONE NUMBER</label> <input type="tel" id="phone" name=" name" placeholder="請輸入電話號碼 如：13111111111" required pattern="^1[34578]\d{9}$" /> <span class="icon-phone"></span> </li> <li> <label for="email">EMAIL ADDRESS</label> <input type="email" id="email" name=" name" placeholder="請輸郵箱地址 如：[email protected]" required /> <span class="icon-email"></span> </li> <li> <label for="url">WEBSITE</label> <input type="url" id="url" name=" name" placeholder="請輸主頁地址 如：http://www.createthink.net" required pattern="(http|https)://.+" /> <span class="icon-website"></span> </li> </ul> <button type="submit">Submit</button> </form> </body>
</html>
客戶端驗證是網頁客戶端程序最常用的功能之一，我們之前使用了各種各樣的js庫來進行表單的驗證。HTML5其實早已為我們提供了表單驗證的功能。至於為啥沒有流行起來估計是兼容性的問題還有就是樣式太醜陋了吧。
下面我們將來一步一步創造一個HTML5和CSS3的表單驗證，只使用HTML和CSS。
完成後的如下：
第一步：整理驗證字段和類型
首先我們需要如下幾個字段：
- 姓名(full name)
- 電話號碼(phone number)
- 郵箱地址(email address)
- 網址(website)
在用戶輸入一些信息後，我們需要校驗用戶的信息是否正確，避免錯誤數據和欺騙性的數據傳遞到服務器。
在HTML5的新規範中，input輸入框提供了多種輸入類型比如：tel、email、number、range、color等，這些類型在桌面客戶端中一般體現不是很明顯，如果在移動端鍵盤上面體現的會更明顯。比如number在移動端鍵盤會自動切換為純數字，[email protected]
第二步：確定表單樣式
第三步：模板代碼
使用標準的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元素的編寫，緊著著完善一下它的樣式，讓它看起來更美一些。
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: ‘??‘;
}第八步：: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: ‘??‘;
}完成代碼如下
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> 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; } li span::before { content: ‘??‘; } 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: ‘??‘; } .icon-name::before { content: ‘??‘; } .icon-phone::before { content: ‘??‘; } .icon-email::before { content: ‘??‘; } .icon-website::before { content: ‘??‘; } button { cursor: pointer; border: 1px solid #999; border-radius: 4px; padding: 10px 20px; margin-top: 10px; background: #fff; } </style> </head>
<body> <form action="" onsubmit="return false"> <ul> <li> <label for="name">FULL NAME</label> <input type="text" id="name" name=" name" placeholder="請輸入姓名" required /> <span class="icon-name"></span> </li> <li> <label for="phone">PHONE NUMBER</label> <input type="tel" id="phone" name=" name" placeholder="請輸入電話號碼 如：13111111111" required pattern="^1[34578]\d{9}$" /> <span class="icon-phone"></span> </li> <li> <label for="email">EMAIL ADDRESS</label> <input type="email" id="email" name=" name" placeholder="請輸郵箱地址 如：[email protected]" required /> <span class="icon-email"></span> </li> <li> <label for="url">WEBSITE</label> <input type="url" id="url" name=" name" placeholder="請輸主頁地址 如：http://www.createthink.net" required pattern="(http|https)://.+" /> <span class="icon-website"></span> </li> </ul> <button type="submit">Submit</button> </form> </body>
</html>
總結：
HTML5提供了css鉤子為表單元素，也提供了一些js的接口跟進一步詳細的控制表單的校驗和錯誤提示。如果需要更個性化的校驗和提示方式可以使用js接口。
純H5+c3實現表單驗證