客户端验证是网页客户端程序最常用的功能之一，我们之前使用了各种各样的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. 【Spider】学习使用XMLFeedSpider
			
    前面写了学习CrawlSpider遇到的问题后,今天学XMLFeedSpider又出现了启动后没爬取到数据,但又不报错的情况 经过排查,发现又是一个粗心大意的错误: class SpiderUserX ...
    
			
    2. 
						
  2. 2017最新整理移动Web开发遇到的坑
			
    随着前端的热度不断升温,行业对前端的要求越来越高:精准无误的实现UI设计,已成为前端职业更加精细化的一种表现:随着移动互联网的发展.WebApp似乎一种不可逾越的鸿沟:越来越多的企业开始趋势于轻量级的 ...
    
			
    3. 
						
  3. matomo 开源网站分析平台
			
    1.安装PHP https://www.jianshu.com/p/8d54a401ec06 yum remove php* yum -y install epel-release rpm -Uvh  ...
    
			
    4. 
						
  4. js前端导出excel：json形式的导出
			
    第一中形式的导出:主要是表头对应主体数据,json形式的导出 js库文件名称 : table2excel.js这个js库文件是网上找的,并且自己根据自己业务需求把内容改了一下复制到 table2exc ...
    
			
    5. 
						
  5. Jenkins安装部署（二）
			
    Jenkins配置 一.修改jenkins家目录 由于jenkins在启动个之后会默认将所有的构建应用在家目录中创建一遍,为了合理化服务器资源,重新定义jenkins家目录. 在tomcat的cata ...
    
			
    6. 
						
  6. js 小结
			
    <script type="text/javascript"> var hotalAddJs = { makeSubmitDataHandler: function ( ...
    
			
    7. 
						
  7. 关于vs2010开发的ASP项目部署到XPSP2系统上出现找不到Reportviewer.XX.文件的解决方案
			
    尝试方法如下: 1.将webform.dll.winform.dll.common.dll三个引用直接复制到服务器的Bin目录,未解决问题,提示无法正确加载,程序及已关闭等. 2.SQLSysClrT ...
    
			
    8. 
						
  8. word 2016 加载 mathtype
			
    1.加载wold: 首先打开word,选择选项-------加载项------管理(A),选择word加载项,点击转到 这儿显示的是我已经添加过的所以显示的有. 2.点击添加,找到你的mathtype ...
    
			
    9. 
						
  9. 微信小程序接入百度统计
			
    一. 百度统计添加应用,获取appkey和微信小程序统计sdk: 1. 百度统计首页,点击“我的全部应用”右侧的添加按钮: 2. “应用类型”选择小程序统计,选择微信小程序,填写应用名称信息,选择内容 ...
    
			
    10. 
						
  10. c++实现循环队列
			
    #include <iostream> #include<stdio.h> #include<stdlib.h> using namespace std; ;//  ...
    
			
    11.