纯CSS实现表单验证_html/css_WEB-ITnose
程序员文章站
2023-12-30 17:18:04
...
ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css selectors level 4中的表单相关的伪类选择器。 :required和:optional :in-range和out-of-range :valid和:invalid :read-only和:read-write 具有disabled属性的表单 具有read-only或disbaled属性的text-area 其他没有指定contenteditable属性的任何元素 Codrops CSS Referrence CSS Selectors Level 4 a lightning fast, cross-browser CSS 3 & 4 selector engine for JavaScript Browser CSS-Selector-Test
案例欣赏
代码我同样放到了codepen,大家可以在线研究,或下载收藏。
知识解析
关键在于使用css selectors levle4里的一些伪类实现表单验证,这些伪类有:
上面的案例就是使用了:in-range和:out-of-range,接下去我们来一一解读下。
:required和:optional
:required可以选中具有required属性的表单元素,可以是input、select和textarea,例如下面这些元素都会被选中。
:optional则选中不具有required属性的表单元素,利用这两个伪类我们可以实现下面这个有意思的效果。代码同样放在了codepen,在线研究or下载收藏,悉听尊便。
本代码主要利用: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伪类。
同样,放在了codepen,请在线研究或下载收藏,然后我们来看看核心代码,如下所示。
input:invalid{ border: 1px solid tomato; }input:valid~ label::after { content: "耶,一个邮箱!"; }input:invalid ~ label::after { content: "枣糕,邮箱邮箱,是邮箱吗?"; }
:read-only和:read-write
下面这些元素可以激活:read-only伪类。
例如下面代码代码所示的元素,都可以激活:read-only伪类选择器。
:read-write元素恰恰与:read-only元素相反。
这个比较简单,就不再做案例。谢谢。
深入阅读
致谢
推荐阅读
-
纯CSS实现表单验证_html/css_WEB-ITnose
-
CSS3实现了提交按钮等待打点循环效果_html/css_WEB-ITnose
-
想实现一个像csdn论坛的侧边栏显示和隐藏效果遇到困难_html/css_WEB-ITnose
-
纯css多级菜单的解决办法_html/css_WEB-ITnose
-
栅格布局的两种简单的实现方式_html/css_WEB-ITnose
-
css3实现的文本无法选中效果_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
CPropertySheet标签页 实现各个CPropertyPage页面之间的切换_html/css_WEB-ITnose
-
css实现带箭头选项卡_html/css_WEB-ITnose
-
html实现圆角矩形_html/css_WEB-ITnose