客户端验证是网页客户端程序最常用的功能之一，我们之前使用了各种各样的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. vmware 共享文件夹
			
    参考 https://jingyan.baidu.com/article/7f766daf7866be4101e1d0ed.html 只是设置共享文件夹选项还不行,需要从安装vmware的安装路径中找 ...
    
			
    2. 
						
  2. 关于slavetable
			
    slavetable有两种情况, 从表有三个要素 1.自己主键字段的idfield 2.对应主表的主键字段masterIdField 3.对应主表主键的值 模式一.MasetrEdit模式  也就是主 ...
    
			
    3. 
						
  3. 安卓下H5弹窗display:table的bug
			
    表单以弹窗的形式弹出时,若设置了表单的div:display:table下,安卓打开页面输入法的时候,表单顶到屏幕顶部之后,再也无法上滑,键盘遮住了下面的输入框.在ios下,一切显示正常,因为iOS会 ...
    
			
    4. 
						
  4. 160. Intersection of Two Linked Lists (List；Two-Pointers)
			
    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...
    
			
    5. 
						
  5. python第三方库requests简单介绍
			
    一.发送请求与传递参数 简单demo: import requests r = requests.get(url='http://www.itwhy.org') # 最基本的GET请求 print(r ...
    
			
    6. 
						
  6. SpringBoot08 请求方式、参数获取注解、参数验证、前后台属性名不一致问题、自定义参数验证注解、BeanUtils的使用
			
    1 请求方式 在定义一个Rest接口时通常会利用GET.POST.PUT.DELETE来实现数据的增删改查:这几种方式有的需要传递参数,后台开发人员必须对接收到的参数进行参数验证来确保程序的健壮性 1 ...
    
			
    7. 
						
  7. 唯品会海量实时OLAP分析技术升级之路
			
    本文转载自公众号 DBAplus社群 , 作者:谢麟炯 谢麟炯,唯品会大数据平台高级技术架构经理,主要负责大数据自助多维分析平台,离线数据开发平台及分析引擎团队的开发和管理工作,加入唯品会以来还曾负责 ...
    
			
    8. 
						
  8. 【nlp】中文分词基础原则及正向最大匹配法、逆向最大匹配法、双向最大匹配法的分析
			
    分词算法设计中的几个基本原则: 1.颗粒度越大越好:用于进行语义分析的文本分词,要求分词结果的颗粒度越大,即单词的字数越多,所能表示的含义越确切,如:“公安局长”可以分为“公安 局长”.“公安局 长” ...
    
			
    9. 
						
  9. swift - 正则表达式
			
    import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoa ...
    
			
    10. 
						
  10. [leetcode]449. Serialize and Deserialize BST序列化与反序列化BST
			
    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...
    
			
    11.