使用HTML5和CSS3表单验证功能


Posted in HTML / CSS onMay 05, 2017

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

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

完成后的如下:

使用HTML5和CSS3表单验证功能

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

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

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

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

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

第二步:确定表单样式

我们还需要确定表单最终的样式风格,一般这个工作来至于设计师。这里我在dribbble上面找了一个表单的样式作为这次的demo风格。

使用HTML5和CSS3表单验证功能

第三步:模板代码

使用标准的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表单html代码完成代码如下:

使用HTML5和CSS3表单验证功能

第六步:增加样式

完成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代码完成代码如下:

使用HTML5和CSS3表单验证功能

第七步:增加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: '?';
}
/*我们也可根据类名定义一些其他的表情*/
.icon-name::before {
  content: '?';
}
.icon-phone::before {
  content: '?';
}
.icon-email::before {
  content: '?';
}
.icon-website::before {
  content: '?';
}

增加emoji提示样式如下

使用HTML5和CSS3表单验证功能

第八步::invalid和:valid伪类

:valid伪类会匹配满足校验规则的表单元素,:invalid伪类会匹配不满足规则的表单元素。

根据这两个规则我们可以修改满足和不满足规则对应的emoji表情。

/*不满足规则增样式*/
input:focus:invalid {
  border-bottom: 1px solid red;
}
input:focus:invalid + span::before {
  content: '?';
}
/*满足规则样式*/
input:valid,
input:focus:valid {
  border-bottom: 1px solid #11b51d;
}
input:focus:valid + span::before,
input:valid + span::before {
  content: '?';
}

完成代码如下
 

使用HTML5和CSS3表单验证功能

总结:

HTML5提供了css钩子为表单元素,也提供了一些js的接口跟进一步详细的控制表单的校验和错误提示。如果需要更个性化的校验和提示方式可以使用js接口。

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 #HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 #HTML / CSS
css3图片边框border-image的用法
Jun 30 #HTML / CSS
css3 border-radius属性详解
Jul 05 #HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 #HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 #HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 #HTML / CSS
You might like
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
介绍Python中的__future__模块
2015/04/27 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python实现手势识别的示例(入门)
2020/04/15 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
单位人事专员介绍信
2014/01/11 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
毕业设计致谢词
2015/05/14 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python