纯CSS3实现不错的表单验证效果
这是补充HTML5基础知识的系列内容,其他为:
- 一、HTML5-- 新的结构元素
- 二、HTML5-- figure、time、details、mark
- 三、HTML5-- details活学活用
- 四、HTML5-- 现存元素的变化
- 五、HTML5 -- Web表单
今天继续学习Web表单相关的内容,不过今天重点落实到实战中,利用HTML5表单与CSS3-UI实现一款不错的表单效果。
效果可看下面动图:
如效果演示,我们今天就通过简单几行CSS就可实现。
预备知识
- 1、HTML5新增的表单类型:tel、email、url(上一篇有介绍)
- 2、HTML5表单基本验证:required属性
- 3、HTML5表单自定义验证规则:pattern属性
主要介绍内容
- 1、CSS3用户接口模块中的伪类
- 2、自定义错误消息
正文
既然是表单,我们得有基础的表单HTML结构,下面是我创建的结构,三个表单都是必填字段,并且对于tel
一栏我们设置了自定义的验证规则:必须是11位数字。
<form>
<ol>
<li>
<label for="tel">Tel:</label>
<input type="tel" required name="" pattern="\d{11}" id="tel">
</li>
<li>
<label for="url">Website:</label>
<input type="url" required name="" id="url">
</li>
<li>
<label for="email">Email:</label>
<input type="email" required name="" id="email">
</li>
<li>
<input type="submit" name="" value="Send the form">
</li>
</ol>
</form>
创建完成后的效果如下,感觉和我们想要的效果差别还很大。本是同根生啊,一样的HTML,咋这个这么丑。
别急,下面我们慢慢给它穿衣服。
下面使用简单的规则,对该表单进行美化:
* {
margin: 0;
font: 13px tahoma, verdana, sans-serif;
padding: 0;
}
ol {
width: 400px;
margin: 50px;
}
li {
clear: both;
list-style-type: none;
margin: 0 0 10px;
}
li:nth-last-child(1) {
text-align: center;
}
label {
display: block;
float: left;
margin: 0 10px 0 0;
padding: 5px;
text-align: right;
width: 100px;
}
input {
border-radius: 5px;
padding: 5px 5px 5px 30px;
width: 155px;
}
input:focus {
outline: none;
}
现在效果已经很不错了,不过离我们的目标还有一段距离,现在我们该考虑下,表单验证的各个环节,输入框应该长什么样。上面的示例中有三种情况:
- 1、输入框未激活时
- 2、输入框激活(输入不正确)
- 3、输入框激活(输入正确)
针对上面的三个情况,这里进行了三个描述:
- 1、未激活时,必填表单显示橙色提醒
- 2、激活时,输入不正确,表单为深红色提示
- 3、激活时,输入正确,表单为绿色通过
与之相随的是三个图标的变化。
当我们定义把表单状态定义完成以后其实我们心里已经大致有个效果了,代码是实现效果的工具,下面我们看下如何定义:
首先是输入框未激活,此时的输入框状态为invalid
以及required
:
input:invalid:required {
background-image: url('nor.png');
box-shadow: 0 0 5px #f0bb18;
border: 2px solid #f0bb18;
}
其次是输入框激活时,但还没有输入成功,此时输入框状态为focus
以及invalid
:
input:focus:invalid {
background-image: url('warn.png');
box-shadow: 0 0 5px #b01212;
border: 2px solid #b01212;
}
最后是输入框激活时,表单输入成功,这时候输入框状态为valid
:
input:valid {
background-image: url('suc.png');
border: 2px solid #7ab526;
}
最后,对提交按钮进行修饰:
input[type="submit"] {
background: #7ab526;
border: none;
box-shadow: 0 0 5px #7ab526;
color: #fff;
cursor: pointer;
font-weight: bold;
padding: 7px;
width: 150px;
}
怎么样,还不错吧。
这里不先介绍所有的新CSS选项,更多的CSS选项需要继续探索,我们仅仅使用了几个就可以实现这么不错的效果。
我们使用的伪类如下:
- :valid —— 表单元素在内容符合元素类型并验证通过后,获得该类
- :invalid —— 如果表单元素内容有误,它将获得该类
- :required —— 任何拥有required属性的表单元素应用了此类
其他拓展
1、不触发浏览器验证
如果你不希望浏览器为表单验证,使用novalidate
属性或formnovalidate
属性可以关闭浏览器验证。
其中novalidate
是表单form
所具有的属性,提交表单时会忽略任何错误提示和空白域。
<form novalidate>
...
</form>
formnovalidate
是input元素的属性,可以为单个表单元素设置该属性。
<form>
...
<input type="submit" formnovalidate>
</form>
上述表单同样不会触发验证。
2、自定义错误提示内容
在上面的例子中可以看到,浏览器会对我们的表单进行验证,在这个过程中会弹出错误消息。而随着输入的不同,这些验证消息也是不一样的。
我们虽然不能更改提示框的样式,但我们可以使用JavaScript的setCustomValidity()
函数修改错误文字:
<form>
<input oninput="check()" type="tel" id="tel">
</form>
<script>
function check() {
tel = document.querySelector('#tel');
tel.setCustomValidity('请输入正确的11位电话号码');
}
</script>
那么,现在当我们输入的时候,提示内容就变成我们自定义的了:
现在还有一个问题,浏览器的提示是不一样的,为空时的提示和错误的提示文案不一样,这样我们应该怎么分开处理呢?
这时候就需要validity
来查看当前的验证状态:
tel = document.querySelector('#tel');
console.log( tel.validity )
如上图所示,当前验证状态为:customError
,就是说用户自定义的验证失败,我们可以根据这些状态来动态的更新提示信息。如果最终验证成功,其中的valid
将变为true。
function check( el ) {
var validity = el.validity;
if ( validity.valueMissing ) {
el.setCustomValidity('该字段为必填内容');
} else if ( validity.patternMismatch ) {
el.setCustomValidity('输入内容不符合格式');
} else {
el.setCustomValidity('输入有误');
}
}
上述只是演示,实际场景时刻替换自己的提示内容。
最后,可以通过validationMessage
来获取当前的错误提示信息:
console.log( el.validationMessage )
// "请填写此字段。"
总结
在本次学习中做了一个简单且最常见的Demo,另外介绍了一些关于表单验证修饰的细节,虽然这些东西五年前就已经有了,但补充基础知识什么时候都不算晚。
今天学习了valid、invalid、required的使用,知识点虽小,但效果却不错,每次学习都有新发现,慢慢积累。
纯CSS3实现不错的表单验证效果的更多相关文章
- 纯CSS3个性化圆形按钮登录表单
在线演示 本地下载
- [H5表单]html5自带表单验证体验优化及提示气泡修改
慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...
- 自定义表单验证--jquery validator addMethod的使用
原文地址:jquery validator addMethod 方法的使用作者:蜡笔小玄 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- 表单验证插件jquery.validate的使用方法演示
jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...
- 微信小程序之表单验证
表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...
- jquery validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...
随机推荐
- Python+Selenium 环境配置之Firefox,IE,Chrome几种浏览器运行
Selenium(Webdriver)支持Firefox,IE,Chrome等多个浏览器.很多人可能装环境时遇到很多问题,下面简单聊聊如何配置测试这几个浏览器以及相关通过简单的实例来测试. 1.Fir ...
- 一道题看懂OC的文件管理:NSFileManager,计算文件包含内存大小
计算文件夹下所有文件的大小 // 查看错误信息 __autoreleasing NSError *error; // 文件管理对象 NSFileManager *manager = [NSFileMa ...
- Linux之特殊权限(SUID/SGID/SBIT)
特殊权限的介绍 Set UID 当s这个标志出现在文件所有者的x权限上时,如/usr/bin/passwd这个文件的权限状态:“-rwsr-xr-x.”,此时就被称为Set UID,简称为SUID.那 ...
- Android获取手机唯一码
大部分安卓手机都可以获取手机唯一码,但是有些手机的厂商却禁止了获取手机唯一码的权限,导致我们不能使用手机唯一码作为标识,但遇到一些必须要填的坑,我们也不能不填,所以使用以下方法来填坑,因此我们使用UU ...
- Android高斯模糊技术,实现毛玻璃效果(转)
本博客转自郭霖公众号:http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650235930&idx=1&sn=e328 ...
- linux命令学习-3-sysctl
sysctl 内核变量配置 Usage: sysctl [options] [variable[=value] ...] NAME sysctl - configure kernel parame ...
- Linux下部署
moto66@163.com 0144586wei 郭 2015/3/23 星期一 9:29:38 服务器密码:0144586Wei120.26.62.247
- SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解
SpringMVC强大的数据绑定(2)——第六章 注解式控制器详解 博客分类: 跟开涛学SpringMVC 6.6.2.@RequestParam绑定单个请求参数值 @RequestParam用于 ...
- C语言-基础
程序是为了让计算机完成某项任务而编写的逐条执行的指令序列. C语言的特点是:结构化,语言简洁,功能强大,移植性好. 因为移植性好,所以大多数单片机如51.stm32,msp430,等众多嵌入式微处理器 ...
- My first essay
今天是我开通博客第一天,从此开始了我的博客之路.为了实现成为程序猿的我,现在开始努力啦~今年大三,就读杭州电子科技大学,通信工程专业.现在在自学web前端,虽然与我就读专业并无多大相关,但是这是根据自 ...