前端：使用CSS干JavaScript的活，Pseudo-class :empty
100人浏览 2024-11-12 08:34:08
废话不多说，直接来看，你要实现这个功能：点击提交按钮，如果email没有填写，就提示报错信息，如下图
一般你会这样设计，首先看HTML结构如下，很简单没什么特殊的，
用CSS给他们美化一下，显示如下：
最后JS来控制：
这样已经很好了，但这里有个问题，相信大家都发现了，就是在没有错误的情况下，那个空的红色错误提示框一直显示在那里，这不是我们想要的。
于是正常的思想就是：先把它默认隐藏起来，当提交按钮被点击时，如果发生错误再把它一起显示出来。这就需要用JavaScript来控制了，比如错误发生时，使用Javascript给那个error div多设置一个display:block或者apply一个显示的class
其实有更好的办法，就是我们今天的主角Pseudo-class :empty
看下面的CSS使用：
仅仅需要几行简单的CSS就可以实现，它表示，如果这个error div的内容是空时，就使用这条样式，就是隐藏这个error
最终效果如下，是不是很不错：
最后，它是所有浏览器都支持的，请大家放心使用。
相关推荐
-
php 实现 jwt2025-04-25 02:03:59
-
PHP导出PDF文件2025-04-25 01:46:22 -
PHP和HTML怎么结合生成PNG图片2025-04-25 01:25:05 -
nginx+njs 配置 模拟2025-04-25 01:01:51 -
nginx websocket 400 – 解决 nginx 反代 wss 出现的 400 错误
nginx websocket 400 – 解决 nginx 反代 wss 出现的 400 错误2025-04-25 00:05:03
