使用HTML5和CSS3表單驗(yàn)證功能

客戶端驗(yàn)證是網(wǎng)頁(yè)客戶端程序最常用的功能之一,我們之前使用了各種各樣的js庫(kù)來(lái)進(jìn)行表單的驗(yàn)證。HTML5其實(shí)早已為我們提供了表單驗(yàn)證的功能。至于為啥沒(méi)有流行起來(lái)估計(jì)是兼容性的問(wèn)題還有就是樣式太丑陋了吧。
下面我們將來(lái)一步一步創(chuàng)造一個(gè)HTML5和CSS3的表單驗(yàn)證,只使用HTML和CSS。
完成后的如下:
第一步:整理驗(yàn)證字段和類型
首先我們需要如下幾個(gè)字段:
- 姓名(full name)
- 電話號(hào)碼(phone number)
- 郵箱地址(email address)
- 網(wǎng)址(website)
在用戶輸入一些信息后,我們需要校驗(yàn)用戶的信息是否正確,避免錯(cuò)誤數(shù)據(jù)和欺騙性的數(shù)據(jù)傳遞到服務(wù)器。
在HTML5的新規(guī)范中,input輸入框提供了多種輸入類型比如:tel、email、number、range、color等,這些類型在桌面客戶端中一般體現(xiàn)不是很明顯,如果在移動(dòng)端鍵盤(pán)上面體現(xiàn)的會(huì)更明顯。比如number在移動(dòng)端鍵盤(pán)會(huì)自動(dòng)切換為純數(shù)字,email鍵盤(pán)會(huì)自動(dòng)切換帶有@的鍵盤(pán)。
第二步:確定表單樣式
我們還需要確定表單最終的樣式風(fēng)格,一般這個(gè)工作來(lái)至于設(shè)計(jì)師。這里我在dribbble上面找了一個(gè)表單的樣式作為這次的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)建一個(gè)基本的form表單元素,這里我們不提交任何數(shù)據(jù)只是一個(gè)演示,所以form不會(huì)進(jìn)行提交。
<form action="" onsubmit="return false"> </form>
第五步:創(chuàng)建表單元素
表單元素一共有如下元素組成:
- ul
- li
- label
- input
- span
ul和li元素用于排版布局,用于分割表單元素和布局。label用于表單的字段提示文字。input用于用戶輸入數(shù)據(jù)。span用于使用emoji提示用戶字段是否填寫(xiě)正確。
<ul> <li> <label for="name">FULL NAME</label> <input type="text" id="name" name=" name" placeholder="請(qǐng)輸入姓名"/> <span class="icon-name"></span> </li> </ul>
form表單html代碼完成代碼如下:
第六步:增加樣式
完成form元素的編寫(xiě),緊著著完善一下它的樣式,讓它看起來(lái)更美一些。
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提示
在每個(gè)form表單結(jié)構(gòu)中,我們已經(jīng)增加了一個(gè)span標(biāo)簽,比如name字段中我們?cè)黾恿艘粋€(gè)<span class="icon-name"></span>標(biāo)簽?,F(xiàn)在給他加上樣式用于顯示校驗(yàn)字段的狀態(tài)。
li span { display: block; position: absolute; right: 0; top: 10px; font-size: 28px; } /*默認(rèn)的是一個(gè)微笑的表情*/ 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偽類會(huì)匹配滿足校驗(yàn)規(guī)則的表單元素,:invalid偽類會(huì)匹配不滿足規(guī)則的表單元素。
根據(jù)這兩個(gè)規(guī)則我們可以修改滿足和不滿足規(guī)則對(duì)應(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: '😀'; }
完成代碼如下
總結(jié):
HTML5提供了css鉤子為表單元素,也提供了一些js的接口跟進(jìn)一步詳細(xì)的控制表單的校驗(yàn)和錯(cuò)誤提示。如果需要更個(gè)性化的校驗(yàn)和提示方式可以使用js接口。
相關(guān)文章
HTML5表單驗(yàn)證特性(知識(shí)點(diǎn)小結(jié))
這篇文章主要介紹了HTML5表單驗(yàn)證特性的一些知識(shí)點(diǎn),本文通過(guò)實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-10html5自帶表單驗(yàn)證體驗(yàn)優(yōu)化及提示氣泡修改功能
很多朋友進(jìn)行表單驗(yàn)證的時(shí)候,都是自己用jquery或者js手工驗(yàn)證,或者用一下jquery插件進(jìn)行驗(yàn)證。感覺(jué)html5自帶驗(yàn)證不是很好用,下面小編給大家分享使用純html5編寫(xiě)的一個(gè)表2017-09-12HTML5 表單驗(yàn)證失敗的提示語(yǔ)問(wèn)題
這篇文章主要介紹了HTML5 表單驗(yàn)證失敗的提示語(yǔ)問(wèn)題的相關(guān)資料,需要的朋友可以參考下2017-07-13HTML5實(shí)現(xiàn)表單自動(dòng)驗(yàn)證功能實(shí)例代碼
在HTML5 中,在增加了大量的表單元素與屬性的同時(shí),也增加了大量在提交時(shí)對(duì)表單與表單內(nèi)新增元素進(jìn)行內(nèi)容有效性驗(yàn)證的功能,接下來(lái)我們來(lái)講一下自動(dòng)驗(yàn)證,需要的朋友參考2017-01-11HTML5利用約束驗(yàn)證API來(lái)檢查表單的輸入數(shù)據(jù)的代碼實(shí)例
這篇文章不會(huì)去討論簡(jiǎn)單的input type,本文想把重點(diǎn)放在HTML5表單驗(yàn)證機(jī)制上。主要介紹是HTML5是如何利用約束驗(yàn)證API來(lái)檢查表單的輸入數(shù)據(jù)的,當(dāng)然,本文會(huì)涉及到很多其它2016-12-20html5的input的required使用中遇到的問(wèn)題及解決方法
這篇文章主要介紹了h5的input的required使用中遇到的問(wèn)題及解決方法,文中給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友參考下吧2018-04-24html5中valid、invalid、required的定義
HTML5的出現(xiàn)為我們提供一些屬性,不用編寫(xiě)js和正則即可解決這個(gè)檢驗(yàn)表單內(nèi)容,下面為大家介紹下valid、invalid、required的定義2014-02-21wordpress添加Html5的表單驗(yàn)證required方法小結(jié)
這篇文章主要介紹了wordpress添加Html5的表單驗(yàn)證required方法小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參2020-08-18