纯CSS3实现表单验证效果(非常不错)


Posted in HTML / CSS onJanuary 18, 2017

今天继续学习Web表单相关的内容,不过今天重点落实到实战中,利用HTML5表单与CSS3-UI实现一款不错的表单效果。

效果可看下面动图:

纯CSS3实现表单验证效果(非常不错)

如效果演示,我们今天就通过简单几行CSS就可实现。

主要介绍内容

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,咋这个这么丑。

纯CSS3实现表单验证效果(非常不错)

别急,下面我们慢慢给它穿衣服。

下面使用简单的规则,对该表单进行美化:

* {
    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;
}

现在效果已经很不错了,不过离我们的目标还有一段距离,现在我们该考虑下,表单验证的各个环节,输入框应该长什么样。上面的示例中有三种情况:

纯CSS3实现表单验证效果(非常不错)

1、输入框未激活时
2、输入框激活(输入不正确)
3、输入框激活(输入正确)

针对上面的三个情况,这里进行了三个描述:

1、未激活时,必填表单显示橙色提醒
2、激活时,输入不正确,表单为深红色提示
3、激活时,输入正确,表单为绿色通过

与之相随的是三个图标的变化。

纯CSS3实现表单验证效果(非常不错)

当我们定义把表单状态定义完成以后其实我们心里已经大致有个效果了,代码是实现效果的工具,下面我们看下如何定义:

首先是输入框未激活,此时的输入框状态为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;
}

纯CSS3实现表单验证效果(非常不错)

怎么样,还不错吧。

这里不先介绍所有的新CSS选项,更多的CSS选项需要继续探索,我们仅仅使用了几个就可以实现这么不错的效果。

我们使用的伪类如下:

:valid —— 表单元素在内容符合元素类型并验证通过后,获得该类
:invalid —— 如果表单元素内容有误,它将获得该类
:required —— 任何拥有required属性的表单元素应用了此类

其他拓展

1、不触发浏览器验证

如果你不希望浏览器为表单验证,使用novalidate属性或formnovalidate属性可以关闭浏览器验证。

其中novalidate是表单form所具有的属性,提交表单时会忽略任何错误提示和空白域。

<form novalidate>
    ...
</form>

formnovalidate是input元素的属性,可以为单个表单元素设置该属性。

<form>
    ...
    <input type="submit" formnovalidate>
</form>

上述表单同样不会触发验证。

2、自定义错误提示内容

在上面的例子中可以看到,浏览器会对我们的表单进行验证,在这个过程中会弹出错误消息。而随着输入的不同,这些验证消息也是不一样的。

纯CSS3实现表单验证效果(非常不错)

我们虽然不能更改提示框的样式,但我们可以使用JavaScript的setCustomValidity()函数修改错误文字:

<form>
    <input oninput="check()" type="tel" id="tel">
</form>
<script>
    function check() {
        tel = document.querySelector('#tel');
        tel.setCustomValidity('请输入正确的11位电话号码');
    }
</script>

那么,现在当我们输入的时候,提示内容就变成我们自定义的了:

纯CSS3实现表单验证效果(非常不错)

现在还有一个问题,浏览器的提示是不一样的,为空时的提示和错误的提示文案不一样,这样我们应该怎么分开处理呢?

这时候就需要validity来查看当前的验证状态:

tel = document.querySelector('#tel');
console.log( tel.validity )

纯CSS3实现表单验证效果(非常不错)

如上图所示,当前验证状态为: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的使用,知识点虽小,但效果却不错,每次学习都有新发现,慢慢积累。

HTML / CSS 相关文章推荐
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
使用CSS实现阅读进度条
Feb 27 #HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 #HTML / CSS
纯CSS3实现Material Design效果
Mar 09 #HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 #HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 #HTML / CSS
手把手教你用纯css3实现轮播图效果实例
May 04 #HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 #HTML / CSS
You might like
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
php单链表实现代码分享
2016/07/04 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Python中包的用法及安装
2020/02/11 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
毕业生的自我评价
2013/12/30 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
岗位职责的构建方法
2014/02/01 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
信访稳定工作汇报
2014/10/27 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers