纯CSS3实现不错的表单验证效果

这是补充HTML5基础知识的系列内容,其他为:



今天继续学习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的使用,知识点虽小,但效果却不错,每次学习都有新发现,慢慢积累。

时间: 01-18

纯CSS3实现不错的表单验证效果的相关文章

jQuery简单表单验证效果

jQuery简单表单验证效果:只要有表单的地方,基本都会有表单验证,下面就结合实例简单介绍一下最简单的表单验证,如何防止填写的表单内容为空.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit

简单的JS表单验证效果代码

简单的JS表单验证代码:表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://w

纯CSS3个性化圆形按钮登录表单

在线演示 本地下载 原文地址:https://www.cnblogs.com/lovellll/p/10105355.html

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi

jquery validate表单验证插件-推荐

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的

纯H5+c3实现表单验证

客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧. 下面我们将来一步一步创造一个HTML5和CSS3的表单验证,只使用HTML和CSS. 完成后的如下: 第一步:整理验证字段和类型 首先我们需要如下几个字段: 姓名(full name) 电话号码(phone number) 邮箱地址(email address) 网址(website) 在用户输入

【jquery】Validform,一款不错的 jquery 表单验证插件

关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实! 功能简介 可以在 input 上直接绑定正则,可

纯CSS实现表单验证

ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css selectors level 4中的表单相关的伪类选择器. 案例欣赏 代码我同样放到了codepen,大家可以在线研究,或下载收藏. 知识解析 关键在于使用css selectors levle4里的一些伪类实现表单验证,这些伪类有: :required和:optional :in-range和out-o

群里分享的react的收藏一下!今日周末,改了个表单验证然后无所事事了!

今日周末,改了个表单验证然后无所事事了,然后把昨天群里分享的react的收藏一下尽管现在还在研究angular和nodeJs毕竟刚刚开始用有点不熟...没准以后会研究一下react毕竟看着下面这张图还是觉得有点欢乐的 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,