纯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 相关文章推荐
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
带你了解CSS基础知识,样式
Jul 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 strrpos()与strripos()函数
2013/08/31 PHP
php实现的日历程序
2015/06/18 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
家具厂厂长岗位职责
2014/01/01 职场文书
经销商培训邀请函
2014/01/21 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
法学专业求职信
2014/07/15 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
导游词之神仙居景区
2019/11/15 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android