纯CSS实现表单验证

一时失言乱红尘 2022-08-06 15:04 185阅读 0赞

# 目录 #

*  目录
 *  引言
 *  案例欣赏
    
     *  知识解析
     *  required和optional
     *  in-range和out-of-range
     *  valid和invalid
     *  read-only和read-write
 *  浏览器兼容情况
 *  深入阅读
 *  致谢

# 引言 #

ladies and 乡亲们，表单验证你在做吗？客户端or服务器端，javascript or jquery，动手写 or 使用插件，今天我们来探索下使用纯css实现表单验证，借以学习css selectors level 4中的表单相关的伪类选择器。

# 案例欣赏 #

![这里写图片描述][20150205061619015]  
代码我同样放到了codepen，大家可以[在线研究][Link 1]，或[下载收藏][Link 2]。

## 知识解析 ##

关键在于使用css selectors levle4里的一些伪类实现表单验证，这些伪类有：

*  :required和:optional
 *  :in-range和out-of-range
 *  :valid和:invalid
 *  :read-only和:read-write

上面的案例就是使用了:in-range和:out-of-range，接下去我们来一一解读下。

## :required和:optional ##

:required可以选中具有required属性的表单元素，可以是input、select和textarea，例如下面这些元素都会被选中。

:optional则选中不具有required属性的表单元素，利用这两个伪类我们可以实现下面这个有意思的效果。代码同样放在了codepen，[在线研究][Link 3]or[下载收藏][Link 4]，悉听尊便。  
![这里写图片描述][20150205064729505]  
本代码主要利用:required和:optional两个伪类对必选和选填的两种表单实施不同的样式，不同的提示文字。核心代码如下所示。

/*可选表单样式*/
    input:optional,
    select:optional { border-right: 3px solid #888; background-color: #f8f8f8; color: #888; }
    /*必选表单样式*/
    input:required,
    textarea:required { border-right: 3px solid #aa0088; }
    /*可选表单提示文字*/
    input:optional+label::after{ content:"(可选)"; }
    /*必选表单提示文字*/
    input:required+label::after{ content:"(必填)"; }
    /*可选表单激活效果*/
    input:optional:focus,
    select:optional:focus { box-shadow: 0 0 2px 1px #aaa; }
    /*必选表单激活效果*/
    input:required:focus,
    select:required:focus,
    textarea:required:focus { outline: 0; box-shadow: 0 0 2px 1px #aa0088; }

## :in-range和out-of-range ##

这两个伪类分别选中表单属性值在范围内、范围外两个状态，这两个伪类可以用在接受数字范围的元素上，例如type为number的表单或者sliders。案例效果如上面“案例欣赏”版块所示，我们这里仅仅展示核心代码，借以帮助大家理解两个伪类的使用。

input:out-of-range{ border: 1px solid tomato; }
    input:in-range~ label::after { content: "输入一个正确的从1到10的数字"; }
    input:out-of-range ~ label::after { content: "枣糕，你傻了！"; }

## :valid和:invalid ##

这两个伪类针对具有type的input表单而立，比如有一个type=email的表单，当它的值不是有效的邮箱格式时触发:invalid伪类，值为有效的邮箱格式时触发:valid伪类。  
![这里写图片描述][20150205090302455]  
同样，放在了codepen，请[在线研究][Link 5]或[下载收藏][Link 6]，然后我们来看看核心代码，如下所示。

input:invalid{ border: 1px solid tomato; }
    input:valid~ label::after { content: "耶，一个邮箱！"; }
    input:invalid ~ label::after { content: "枣糕，邮箱邮箱，是邮箱吗？"; }

## :read-only和:read-write ##

下面这些元素可以激活:read-only伪类。

*  具有disabled属性的表单
 *  具有read-only或disbaled属性的text-area
 *  其他没有指定contenteditable属性的任何元素

例如下面代码代码所示的元素，都可以激活:read-only伪类选择器。

:read-write元素恰恰与:read-only元素相反。  
这个比较简单，就不再做案例。谢谢。

# 浏览器兼容情况 #

上述的几个伪类选择器在标准浏览器(chrome、safari、opera、firefox)里支持良好，IE支持不好。

# 深入阅读 #

*  [Codrops CSS Referrence][]
 *  [CSS Selectors Level 4][]
 *  [a lightning fast, cross-browser CSS 3 & 4 selector engine for JavaScript][a lightning fast_ cross-browser CSS 3 _ 4 selector engine for JavaScript]
 *  [Browser CSS-Selector-Test][]
 *  [CSS-Tricks’s Reference][CSS-Tricks_s Reference]

# 致谢 #

*前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。*  
*本文原文链接，[http://blog.csdn.net/whqet/article/details/43449045][http_blog.csdn.net_whqet_article_details_43449045]*  
*欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]*

[20150205061619015]: /images/20220805/26a3c594e438414a89286d450161dfeb.png
[Link 1]: http://codepen.io/whqet/pen/MYEdxb?editors=110
[Link 2]: http://codepen.io/whqet/share/zip/MYEdxb/
[Link 3]: http://codepen.io/whqet/pen/wBrLWa?editors=110
[Link 4]: http://codepen.io/whqet/share/zip/wBrLWa/
[20150205064729505]: /images/20220805/59fd242bdd344da397fce1def61b6509.png
[20150205090302455]: /images/20220805/995318d12b15444999c985cdbd68b694.png
[Link 5]: http://codepen.io/whqet/pen/pvWXBa?editors=110
[Link 6]: http://codepen.io/whqet/share/zip/pvWXBa/
[Codrops CSS Referrence]: http://tympanus.net/codrops/css_reference/
[CSS Selectors Level 4]: http://dev.w3.org/csswg/selectors/
[a lightning fast_ cross-browser CSS 3 _ 4 selector engine for JavaScript]: http://quicksand.joijs.com/home/
[Browser CSS-Selector-Test]: http://css4-selectors.com/browser-selector-test/
[CSS-Tricks_s Reference]: http://css-tricks.com/almanac/
[http_blog.csdn.net_whqet_article_details_43449045]: http://blog.csdn.net/whqet/article/details/43449045
[http_whqet.github.io]: http://whqet.github.io