客户端验证是网页客户端程序最常用的功能之一，我们之前使用了各种各样的js库来进行表单的验证。HTML5其实早已为我们提供了表单验证的功能。至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧。

下面我们将来一步一步创造一个HTML5和CSS3的表单验证，只使用HTML和CSS。

完成后的如下：

第一步：整理验证字段和类型

首先我们需要如下几个字段：

  • 姓名(full name)
  • 电话号码(phone number)
  • 邮箱地址(email address)
  • 网址(website)

在用户输入一些信息后，我们需要校验用户的信息是否正确，避免错误数据和欺骗性的数据传递到服务器。

在HTML5的新规范中，input输入框提供了多种输入类型比如：tel、email、number、range、color等，这些类型在桌面客户端中一般体现不是很明显，如果在移动端键盘上面体现的会更明显。比如number在移动端键盘会自动切换为纯数字，email键盘会自动切换带有@的键盘。

第二步：确定表单样式

第三步：模板代码

使用标准的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: '												


											
纯H5+c3实现表单验证的更多相关文章
	

    
								
  1. H5自带表单验证
		
    HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...
    
		
    2. 
						
  2. 纯CSS实现表单验证
		
    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...
    
		
    3. 
						
  3. [H5表单]html5自带表单验证体验优化及提示气泡修改
		
    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...
    
		
    4. 
						
  4. JavaScript | 基础表单验证（纯Js）
		
    ———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...
    
		
    5. 
						
  5. JS常见的表单验证，H5自带的验证和正则表达式的验证
		
    H5验证 自带的验证无法满足需求: <form action="" method="get"> name:<input type=" ...
    
		
    6. 
						
  6. H5: 表单验证失败的提示语
		
    前言     前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后, 很多常见的表达验证, 它都已经帮我们实现了, 让我 ...
    
		
    7. 
						
  7. 纯CSS3实现不错的表单验证效果
		
    这是补充HTML5基础知识的系列内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四. ...
    
		
    8. 
						
  8. 移动端H5通用表单验证插件
		
    将表单验证的通用部分提炼出来,做成一个简易插件,方便调用. 已将源码放到GitHub上,名字叫zValidate. 手机可扫描下图查看示例,PC端可点击此处查看: 一.原理 1)需要引入zepto.j ...
    
		
    9. 
						
  9. 使用 纯JQuery 进行 表单 验证
		
    对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性.下面就来分享一个JQuery实现的表 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SO\PR\MO\排产回写的数据如下
			
    QTYOPEN(WMENG).EDATU(promised_mat_availdate).... insert into OUT_ORDER_RES ' ; --PR 净需求 ' ; ---加上PR回 ...
    
			
    2. 
						
  2. SQL Server子查询填充DataSet时报500内部错误的解决办法
			
    运行环境为Visual Studio 2010,数据库为SQL Server 2008. 执行下面SQL语句 SELECT SubsiteId, SubsiteTitle, count(Collect ...
    
			
    3. 
						
  3. python使用函数作为参数
			
    在实际使用中,我们有时希望将函数作为参数传递给另一个方法使用. 比如装饰器实际就是函数调用函数   举个例子,我想传递在调用方法之前打印一下时间:   使用函数当做入参 那就可以把方法名A当做入参传递 ...
    
			
    4. 
						
  4. ubuntu后台运行命令
			
    参考 https://blog.csdn.net/shaozg168/article/details/6979337 nohup ./test.sh &
    
			
    5. 
						
  5. 全国高校绿色计算大赛 预赛第二阶段（Python）第1关：统计分数的麻烦
			
    挑战任务 “绿盟杯”比赛过后,赛事承办方的各位工作人员们就开始分头统计各个参赛队伍和同学的成绩了.赛事规模很大,有10000个队伍参加.经过工作人员认真负责的统计,本来已经统计好了这一万个队伍的分数和 ...
    
			
    6. 
						
  6. Codeforces Beta Round #16 (Div. 2 Only)
			
    Codeforces Beta Round #16 (Div. 2 Only) http://codeforces.com/contest/16 A 水题 #include<bits/stdc+ ...
    
			
    7. 
						
  7. VTP
			
    VTP VLAN中继协议(Vlan Trunking Protocol),是CISCO专用协议.VTP负责在VTP域内同步VLAN信息,这样就不必在每个交换机上配置相同的VLAN信息.VTP还提供一种 ...
    
			
    8. 
						
  8. 【Linux 线程】常用线程函数复习《三》
			
    1.关于函数pthraed_join与函数pthraed_detach 在任何一个时间点上,线程是可结合的(joinable)或者是分离的(detached).一个可结合的线程能够被其他线程收回其资源 ...
    
			
    9. 
						
  9. selenium模拟事件处理
			
    执行原理: 调用ActionChains的方法时不会立即执行,会将所有的操作按顺序存放在一个队列里,当调用perform()方法时,从队列中的事件会依次执行. 支持链式写法或者是分布写法. 鼠标键盘方 ...
    
			
    10. 
						
  10. 配置eclipse+SDK+ADT开发环境
			
    第一步:配置jdk和eclipse环境(已完成): 第二步:ADT配置:依次点击菜单栏:help -> Install new software -> Add -> Local... ...
    
			
    11.