欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間:2017-05-05 15:15:44   作者:佚名   我要評(píng)論
這篇文章主要介紹了使用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)文章

最新評(píng)論