使用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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
JSON在PHP中的应用介绍
2012/09/08 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
PHP chr()函数讲解
2019/02/11 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
跟老齐学Python之网站的结构
2014/10/24 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
消防战士优秀事迹材料
2014/02/13 职场文书
社区活动总结
2015/02/04 职场文书