纯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的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 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教程 变量定义
2009/10/23 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
python中altair可视化库实例用法
2021/01/26 Python
Java软件工程师综合面试题笔试题
2013/09/08 面试题
初中生期末评语大全
2014/04/24 职场文书
希特勒的演讲稿
2014/05/23 职场文书
公司总经理任命书
2014/06/05 职场文书
人大调研汇报材料
2014/08/14 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
工地食品安全责任书
2015/05/09 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
商业计划书格式、范文
2019/03/21 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
手残删除python之后的补救方法
2021/06/26 Python
关于Python中*args和**kwargs的深入理解
2021/08/07 Python