客户端验证是网页客户端程序最常用的功能之一，我们之前使用了各种各样的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. weblogc SessionData.getNextId性能问题
			
    参考:https://www.cnblogs.com/lemon-flm/p/7396627.html weblogic运行中持续报weblogic.servlet.internal.session. ...
    
			
    2. 
						
  2. Java 读写Properties配置文件(转)
			
    转自:http://www.cnblogs.com/xudong-bupt/p/3758136.html
    
			
    3. 
						
  3. ext.js的目录结构的简单解释
			
    adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库.    build: 压缩后的ext全部源码(里面分类存放).    docs: API帮助文档.    ...
    
			
    4. 
						
  4. 终端设备 tty，pty，pts 概念与文件描述符的联系
			
    第1节 理解终端设备tty.pty.pts概念 简要描述: 终端设备默认具有输入.输出功能. 现代我们最常用的接入服务器端的方式(如:ssh通过tcp/ip的方式连接服务器端,作为服务器的终端设备)为 ...
    
			
    5. 
						
  5. APP内的H5页面测试方法， 移动端的浏览器（例如UC浏览器）测试方法
			
    前言: 用appium做UI自动化,测试APP里面的H5和测试手机浏览器打开的H5的操作流程上是有所区别的.比如要测试APP内嵌的H5需要先操作appium启动APP,然后通过context切到web ...
    
			
    6. 
						
  6. Spring Boot 使用465端口发送邮件
			
    2017年10月27日 15:04:24 伊宇紫 阅读数:2710 标签: 465端口邮件springboot 更多 个人分类: Java   版权声明:本文为博主原创文章,未经博主允许不得转载. h ...
    
			
    7. 
						
  7. springboot 日志2
			
      SpringBoot关于日志的官方文档 1.简述 SpringBoot官方文档关于日志的整体说明 本博客基于SpringBoot_1.3.6大家请先简单看下这篇英文的官方文档,文中有说 Sprin ...
    
			
    8. 
						
  8. mysql left join 多条记录 1:n 的处理方法
			
    一.准备两张表,文章表和评伦表 CREATE TABLE `article` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID', ...
    
			
    9. 
						
  9. mvc中webapi添加后没法访问 解决办法
			
    原因:原先项目中没有webapi,后来添加的. 然后就没法正常访问,百度了下发现是 App_Start/WebApiConfig.cs中路由配置多了个api 而且没有加{action}, 然后修改成: ...
    
			
    10. 
						
  10. Windows下PythonQt编译（vs2015+Qt5.11.2+PythonQt 3.2）
			
    后记: 由于自己low,没有下载罪行的python3.2导致编译上遇到种种问题,后文可以参考,建议看: <Windows7 VS2015 下编译 PythonQt3.2> https:// ...
    
			
    11.