正文

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

Pеcu❤lian  2022-02-07  462

关键词：

这是补充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的使用，知识点虽小，但效果却不错，每次学习都有新发现，慢慢积累。

如果感兴趣，可以点击一下“推荐”哦~

转载文章，请标注来源，以及下方公众号链接。

如果感兴趣，也请关注一下公众号：前端基础研究

愿本文不会浪费你的时间，每次都有新收获。

纯h5+c3实现表单验证

客户端验证是网页客户端程序最常用的功能之一，我们之前使用了各种各样的js库来进行表单的验证。HTML5其实早已为我们提供了表单验证的功能。至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧。下面我们... 查看详情

纯css3实现的一些酷炫效果

　　之前在网上看到一些用纯CSS3实现的酷炫效果，以为实现起来比较困难，于是想看看具体是怎么实现的。一、笑脸猫动画实现效果如下：这个实现起来确实比较麻烦，很多地方需要花时间，有耐心地调整。1.先看下页面结构：... 查看详情

纯css3实现的一些酷炫效果

　之前在网上看到一些用纯CSS3实现的酷炫效果，以为实现起来比较困难，于是想看看具体是怎么实现的。一、笑脸猫动画实现效果如下：这个实现起来确实比较麻烦，很多地方需要花时间，有耐心地调整。1.先看下页面结构：<... 查看详情

纯css3动画按钮效果5种漂亮样式

...己喜欢的颜色样式。在线演示源码下载让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是很难。HTML代码：&l 查看详情

纯css3实现transtion过渡效果

...lio-03.jpg"alt=""><bclass="block"></b></a> 最终实现效果：鼠标划入img上去,b标签以遮罩层的方式出现&nbs 查看详情

纯css3实现的一些酷炫效果

一、笑脸猫动画实现效果如下：这个实现起来确实比较麻烦，很多地方需要花时间，有耐心地调整。1.先看下页面结构：<body><divclass="container"><divclass="face"><divclass="hair"><div></div&g... 查看详情

纯css3实现文字间歇滚动效果

...数据来展示所有的数据。效果如图：用JavaScript也很容易实现，但是需要操作DOM，可以参考这篇博客。考虑到项目中经常使用Vue，已经很少操作DOM了，所以考虑最好通过CSS来实现，可以通过Vue给模板元素动态绑定class来实现相同的... 查看详情

纯css实现可切换旋转的立体小盒子

...。先把Demo上了：http://output.jsbin.com/joqidi效果图原理用CSS3实现立体的盒子其实挺简单的，其核心就是CSS3的transfo 查看详情

纯css3实现圆形进度条动画

悄悄地，GIF格式的进度条已经越来越少，CSS进度条如雨后春笋般涌现。今天要介绍的这个CSS3进度条，效果和FlymeOS4上的加载动画一样。首先，来看下最终的效果：查看详情

纯css3配合vue实现微信语音播放效果

前言每次写点东西都扯两句-0-，这几天一半精力放在移动端，一半维护之前的项目。书也少看了，不过还好依旧保持一颗学习的心。对于css3我是之前有专门整理过的，因此对于原理之前也算了解。今天是项目中遇到一个效果，... 查看详情

纯css3效果资源收集整理

awesome-pure-css-no-javascript纯CSS+HTML，不使用JavaScript，能实现怎样的视觉效果?这里收集整理了一些相关资源与工具，欢迎各位补充。GitHub地址，欢迎star~Resources基于单个Div的CSS绘图APureCSS3CyclingSlideshow纯CSS编写出可自动循环播放的Slide... 查看详情

纯css3实现按钮的hover和active时颜色的明暗变化效果

效果：在任意HTML标签上增加样式类f-color-control就可以为此元素增加hover和avtive时颜色的变化;代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.btn{widt 查看详情

如何使用纯css3创建一个简单的五角星图形

我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单，并且可以结合渐变实现更为漂亮的效果。因此使用图片实现五角星已经毫无必要（图片占用... 查看详情

纯css3实现的switch开关按钮

效果如图<p><label><inputclass="mui-switchmui-switch-anim"type="checkbox"checked></label></p>.mui-switch{width:60px;height:31px;position:relative;border:1pxsolid#dfdfdf;backgr 查看详情

转载《时钟效果》

...效果也拿过来。对比样子差了好多啊，但是基本功能都是实现了的，只要修改样式就好了，我的美感特别差，所以就……我用的是css3和js实现的这个效果，渐变是由css3的linear-gradient实现，当然js也有实现的办法，不过js实现到底... 查看详情

纯css实现同一页面下选择之后更换内容效果

实现效果为如下：在同一页面下，当我选中输入手机号时，出现手机号输入框，当我选中输入验证码时，出现验证码输入框，当我选中设置密码时，出现密码框在这里有一个小技巧，就是 1.对下面的输入框设置同样的样... 查看详情

使用纯css3实现一个3d旋转的书本

...无需复杂的建模过程，使用图片和CSS3的一些变换就可以实现更好的展示效果，简洁而有用。书本的3D模型是全部商品中最为简单的。由于其本质上就是一个立方体（cube）。仅仅是带有封面/封底和左側封条。所以要构造一个3D书... 查看详情