《极致版》不掺水，用纯CSS实现超级骚的表单验证功能（转载）

时间：2023-04-02 22:34:09 HTML

作者：陈大鱼头github：KRISACHAN去年写了一篇纯CSS实现表单验证的文章，发表于Not过了很久，有网友告诉鱼头，他们打算用我的这篇文章在团队内分享。当时听到这个消息后，屏幕前的鱼头咧嘴一笑，但是接下来的一段童鞋让我立马笑不出来。但是因为初始化状态是这样的：希望可以改成这样：只有在输入的时候，输入的内容不对，才显示错误信息。童鞋：“那这个功能能实现吗？”我：“……”既然有童鞋对鱼头那么敬重，还打算用鱼头的demo点击预览进行内部分享，那你就硬着头皮实现这个功能吧。首先让我们看一下最终的效果图：DEMO在线查看地址：https://codepen.io/krischan77...各位童鞋点击预览，我们和鱼头拆分一下实现功能:HTML首先，让我们看一下HTML源代码Account:请输入正确的账号
密码：请输入正确的密码Password
这里的html标签比较常规，但是要注意携带的几个属性：requiredrequired中的required是一个布尔属性，用来告诉浏览器这个是否是必填项。来康康DEMO：

请输入信息

效果如下：兼容性如下：nativestyle体验也不错。模式，然后是模式属性。用于验证输入值是否有效。我们的康康DEMO:

PleaseenterIlovefishhead

提交信息效果如下：兼容性如下：不得不感慨原生组件的能力也是很强的。CSS我们康康CSS的下一部分，源码如下：root{--error-color:red;}.form>input{margin-bottom:10px;}.form>.f-tips{color:var(--错误颜色);显示：无；}输入[类型=“文本”]：无效~输入[类型=“提交”]，输入[类型=“密码”]：无效~输入[类型=“提交”]{显示：无;}input[required]:focus:invalid+span{display:inline;}input[required]:empty+span{display:none;}input[required]:invalid:not(:placeholder-shown)+span{display:inline;}我们重点关注以下CSS选择器：:invalid和:valid伪类选择器（:valid和:invalid），用于判断匹配有效或无效，或

元素。:valid伪类选择器表示一个，其值通过验证，告诉用户他们的输入是有效的。:invalid伪类选择器表示一个，其值未通过验证，告诉用户他们的输入无效。示例如下：输入文字：
输入电话号码：效果如下：兼容性如下：:placeholder-shown:placeholder-shown伪类在或

元素显示占位符文本。示例如下：<style>input{border:2pxsolidblack;填充：3px；}input:placeholder-shown{边框颜色：银色；}</style><inputplaceholder="Typesomethinghere!">效果如下：兼容性如下：实现逻辑有了上面的<input/>属性和css选择器的伪类描述，就变得简单多了纯CSS实现表单验证功能。我们先梳理一下功能需求：初始化状态：不显示提交按钮和错误提示清除输入状态：不显示提交按钮和错误提示输入错误状态：输入框错误时，显示错误提示输入正确state：输入框输入正确，隐藏错误提示，显示提交按钮的初始化状态。首先我们知道初始化的时候是没有提示信息的，所以可以直接隐藏提示信息。至于提交按钮，我们使用:invalid来隐藏它，因为初始化的input.value内容不匹配。所以我们有：<style>.form>.f-tips{color:var(--error-color);显示：无；}input[type="text"]:invalid~input[type="submit"],input[type="password"]:invalid~input[type="submit"]{display:none;}</style><inputdata-title="Account"placeholder="请输入正确的账号"pattern="w{6,10}"name="account"type="text"required/><inputdata-title="密码"placeholder="请输入正确的密码"pattern="w{6,10}"name="password"type="password"required/><spanclass="f-tips">请输入correctpassword</span>清除输入状态清除输入状态也比较简单，可以直接使用伪类选择器:empty来判断，只要内容为空，就隐藏错误信息，所以我们有：input[required]:empty+span{display:none;}inputerrorstate在初始化的时候已经隐藏了错误信息，初始化其实是依赖于input这个状态是错误的，还好我们有一个伪类选择器：focus,表示获得焦点的元素（比如一个表单输入），所以我们有：input[required]:focus:invalid+span{display:inline;}虽然我们不能通过输入错误状态来处理，但是我们可以通过监测用户的专注行为来实现。但是这样做有一个缺点，就是当我在另一个输入框输入信息的时候，错误信息就会消失，所以我们还是要判断是否有占位符，输入值，自然没有占位符，所以我们have:input[required]:invalid:not(:placeholder-shown)+span{display:inline;}进入正确的状态完成以上三种状态的实现后，就不需要写正确的状态了，因为不匹配是错误的，匹配是正确的。综上所述，一个完整的纯CSS表单功能就完成了。DEMO地址在这里：https://codepen.io/krischan77...点击预览。由于实际项目的复杂性，这个功能可能不会直接使用，但是里面的知识点和思路我们可以复用。不得不感慨，现在html和css的能力变强了。只要我们愿意传播我们的思想，我们就能写出更多有趣和有价值的效果。欢迎大家尝试！</p>                        
                        
                    </div>
                </div>
                <div class="zuowen_sxy">
                                        <div class="prev">上一篇：<a title="php图像瀑布" href="/webqianduan/234197.html">php图像瀑布</a> </div>
                                        <div class="prev">下一篇：<a title="vue插件弹出提示组件全局" href="/webqianduan/234199.html">vue插件弹出提示组件全局</a> </div>
                                    </div>
                <div class="related_about">
                    <div class="related_about_t"><code>《极致版》不掺水，用纯CSS实现超级骚的表单验证功能（转载）相关文章</code></div>
                    <ul>
                                              <li><a href="/kejifunen/367592.html" target="_blank" title="真人秀《《蜜蜂少女队》》VR版即将来袭，吴奇隆、谢霆锋就在眼">真人秀《《蜜蜂少女队》》VR版即将来袭，吴奇隆、谢霆锋就在眼</a></li>
                                                <li><a href="/kejifunen/367570.html" target="_blank" title="《汪峰十问智库群》第32期-安全链钱克明！区块链安全正处于“">《汪峰十问智库群》第32期-安全链钱克明！区块链安全正处于“</a></li>
                                                <li><a href="/kejifunen/367504.html" target="_blank" title="色情驱动技术！你知道《暴风镜4》的“成人世界”吗？ ">色情驱动技术！你知道《暴风镜4》的“成人世界”吗？ </a></li>
                                                <li><a href="/kejifunen/367184.html" target="_blank" title="《天天向上》在三星Galaxy A9 Star的高科技支持下">《天天向上》在三星Galaxy A9 Star的高科技支持下</a></li>
                                                <li><a href="/kejifunen/367042.html" target="_blank" title="《Pokemon Go》去年总收入达9.5亿美元">《Pokemon Go》去年总收入达9.5亿美元</a></li>
                                                <li><a href="/kejifunen/366962.html" target="_blank" title="人脸识别机器人毁了我最后玩《找麻烦》的乐趣">人脸识别机器人毁了我最后玩《找麻烦》的乐趣</a></li>
                                                <li><a href="/kejifunen/366949.html" target="_blank" title="《Attack》中的VR如何改变传统体育娱乐消费模式？ ">《Attack》中的VR如何改变传统体育娱乐消费模式？ </a></li>
                                                <li><a href="/kejifunen/366938.html" target="_blank" title="美拍《嘿!好样的》完美收官，收获之旅才刚刚开始">美拍《嘿!好样的》完美收官，收获之旅才刚刚开始</a></li>
                                                <li><a href="/kejifunen/366844.html" target="_blank" title="2018CJ TestBird《白皮书》首发！崩溃和UI异常">2018CJ TestBird《白皮书》首发！崩溃和UI异常</a></li>
                                                <li><a href="/kejifunen/366834.html" target="_blank" title="249元！ 《小米枪战》定制耳机发布！送98元游戏卡">249元！ 《小米枪战》定制耳机发布！送98元游戏卡</a></li>
                                                <li><a href="/kejifunen/366618.html" target="_blank" title="硅谷银行《市场态势报告》！牛市之下，创新经济将何去何从？ ">硅谷银行《市场态势报告》！牛市之下，创新经济将何去何从？ </a></li>
                                                <li><a href="/kejifunen/366610.html" target="_blank" title="《三分钟酷品》王牌对战王牌 iRobot Roomba 96">《三分钟酷品》王牌对战王牌 iRobot Roomba 96</a></li>
                                                <li><a href="/kejifunen/366596.html" target="_blank" title="当天使遇上足球看游族《天使纪元》如何玩转世界杯跨界营销">当天使遇上足球看游族《天使纪元》如何玩转世界杯跨界营销</a></li>
                                                <li><a href="/kejifunen/366210.html" target="_blank" title="盘点追寻《绿野仙踪》所用的高科技！可穿戴设备">盘点追寻《绿野仙踪》所用的高科技！可穿戴设备</a></li>
                                                <li><a href="/kejifunen/366177.html" target="_blank" title="《智能家居产品》互联智能与终端智能的博弈">《智能家居产品》互联智能与终端智能的博弈</a></li>
                                                <li><a href="/kejifunen/365934.html" target="_blank" title="科技让电影无处不在，VVETIME投影手机携手张艺谋代表作《">科技让电影无处不在，VVETIME投影手机携手张艺谋代表作《</a></li>
                                                <li><a href="/kejifunen/365667.html" target="_blank" title="您不必担心毕业后立即结婚， 《我在家》帮你装修一个温馨又高性">您不必担心毕业后立即结婚， 《我在家》帮你装修一个温馨又高性</a></li>
                                                <li><a href="/kejifunen/365514.html" target="_blank" title="Gear VR游戏《太空远征计划》！探索适合移动端的游戏">Gear VR游戏《太空远征计划》！探索适合移动端的游戏</a></li>
                                                <li><a href="/kejifunen/365341.html" target="_blank" title="《自然》 和 《科学》 帮忙，感觉FISA要重燃可穿戴设备的">《自然》 和 《科学》 帮忙，感觉FISA要重燃可穿戴设备的</a></li>
                                                <li><a href="/kejifunen/365339.html" target="_blank" title="了解工信部十个技巧《VR产业白皮书》">了解工信部十个技巧《VR产业白皮书》</a></li>
                                            </ul>
                </div>
                
            </div>
            <div class="main-right">
                <div class="right_fix">
                    <div class="r_con">
                        <div class="r_title">最新推荐</div>
                        <ul>
                                                        <li><em>1</em><a href="/kejifunen/371041.html" title="《凉生》该播出标志着TCL与代言人马天宇完美邂逅一周年！ " target="_blank">《凉生》该播出标志着TCL与代言人马天宇完美邂逅一周年！ </a></li>
                                                        <li><em>2</em><a href="/kejifunen/371011.html" title="有关技术的早期消息！ 《王者荣耀》吃鸡玩法曝光，康佳新战略瞄" target="_blank">有关技术的早期消息！ 《王者荣耀》吃鸡玩法曝光，康佳新战略瞄</a></li>
                                                        <li><em>3</em><a href="/kejifunen/370699.html" title="《2015上半年中国智能穿戴行业数据分析报告》用户行为分析" target="_blank">《2015上半年中国智能穿戴行业数据分析报告》用户行为分析</a></li>
                                                        <li><em>4</em><a href="/kejifunen/370691.html" title="非社交、非运动的《跑男》很受欢迎，启发了可穿戴设备的未来" target="_blank">非社交、非运动的《跑男》很受欢迎，启发了可穿戴设备的未来</a></li>
                                                        <li><em>5</em><a href="/kejifunen/370602.html" title="《精灵宝可梦 GO》越来越受欢迎， AR游戏火爆的背后也隐藏" target="_blank">《精灵宝可梦 GO》越来越受欢迎， AR游戏火爆的背后也隐藏</a></li>
                                                        <li><em>6</em><a href="/kejifunen/370435.html" title="线下体验助推 《侏罗纪世界》 IP内容驱动VR产业迈向新高度" target="_blank">线下体验助推 《侏罗纪世界》 IP内容驱动VR产业迈向新高度</a></li>
                                                        <li><em>7</em><a href="/kejifunen/370342.html" title="《纽约时报》推出冬奥AR内容，目前可在IOS设备上体验" target="_blank">《纽约时报》推出冬奥AR内容，目前可在IOS设备上体验</a></li>
                                                        <li><em>8</em><a href="/kejifunen/370317.html" title="一起退休！潮流风格《夕阳红》的幸与不幸" target="_blank">一起退休！潮流风格《夕阳红》的幸与不幸</a></li>
                                                        <li><em>9</em><a href="/kejifunen/369962.html" title="佩戴Oculus Crescent Bay观看《霍比特人》初" target="_blank">佩戴Oculus Crescent Bay观看《霍比特人》初</a></li>
                                                        <li><em>10</em><a href="/kejifunen/369523.html" title="影创全息MR智能眼镜Action One与《头号玩家》意外相" target="_blank">影创全息MR智能眼镜Action One与《头号玩家》意外相</a></li>
                             
                        </ul>
                    </div>
                    <div class="r_con">
                        <div class="r_title">猜你喜欢</div>
                        <ul class="you_like">
                                                        <li><em>1</em><a href="/kejifunen/369128.html" title="《智能硬件专项行动》发布：可穿戴、VR等五大领域迎来好消息" target="_blank">《智能硬件专项行动》发布：可穿戴、VR等五大领域迎来好消息</a></li>
                                                        <li><em>2</em><a href="/kejifunen/369072.html" title="经纬恒润科技前瞻技术负责人张大鹏进行了长达90分钟的深度演讲" target="_blank">经纬恒润科技前瞻技术负责人张大鹏进行了长达90分钟的深度演讲</a></li>
                                                        <li><em>3</em><a href="/kejifunen/368898.html" title="蓝牙SIG发布2018《蓝牙市场最新资讯》！智能家居市场正以" target="_blank">蓝牙SIG发布2018《蓝牙市场最新资讯》！智能家居市场正以</a></li>
                                                        <li><em>4</em><a href="/kejifunen/368895.html" title="《我就是演员》涂松岩的“守护家园”令人感动，贝壳找家帮你找到" target="_blank">《我就是演员》涂松岩的“守护家园”令人感动，贝壳找家帮你找到</a></li>
                                                        <li><em>5</em><a href="/kejifunen/368837.html" title="在世界杯和热播电视剧的带动下《镇魂》，优酷活跃用户增速稳居行" target="_blank">在世界杯和热播电视剧的带动下《镇魂》，优酷活跃用户增速稳居行</a></li>
                                                        <li><em>6</em><a href="/kejifunen/368808.html" title="《使命召唤15》如果你想进入“吃鸡”阵营，就应该选择北通斯巴" target="_blank">《使命召唤15》如果你想进入“吃鸡”阵营，就应该选择北通斯巴</a></li>
                                                        <li><em>7</em><a href="/kejifunen/368730.html" title="离开，原来你是这样的《Pokémon GO》" target="_blank">离开，原来你是这样的《Pokémon GO》</a></li>
                                                        <li><em>8</em><a href="/kejifunen/368708.html" title="《清凉三分钟》小舞，亦师亦友的陪伴机器人，让孩子不再孤独" target="_blank">《清凉三分钟》小舞，亦师亦友的陪伴机器人，让孩子不再孤独</a></li>
                                                        <li><em>9</em><a href="/kejifunen/368698.html" title="《虚拟现实产业发展指导意见》筹备工作已提前启动" target="_blank">《虚拟现实产业发展指导意见》筹备工作已提前启动</a></li>
                                                        <li><em>10</em><a href="/kejifunen/368604.html" title="Nvidia推出史上最强大GPU！耗时10年打造的《复仇者联" target="_blank">Nvidia推出史上最强大GPU！耗时10年打造的《复仇者联</a></li>
                                                        <li><em>11</em><a href="/kejifunen/368441.html" title="真人版《使命召唤11》在韩国上演！试试外骨骼套装" target="_blank">真人版《使命召唤11》在韩国上演！试试外骨骼套装</a></li>
                                                        <li><em>12</em><a href="/kejifunen/368390.html" title="新闻业也在玩虚拟现实吗？ 《纽约时报》发布了虚拟现实新闻客户" target="_blank">新闻业也在玩虚拟现实吗？ 《纽约时报》发布了虚拟现实新闻客户</a></li>
                                                        <li><em>13</em><a href="/kejifunen/368237.html" title="虚拟现实工具开发者程香跑" target="_blank">虚拟现实工具开发者程香跑</a></li>
                                                        <li><em>14</em><a href="/kejifunen/368172.html" title="郑勇，硬仗先锋！独家解密中文版《Kiva仓储机器人》" target="_blank">郑勇，硬仗先锋！独家解密中文版《Kiva仓储机器人》</a></li>
                                                        <li><em>15</em><a href="/kejifunen/368158.html" title="《最后一球》比赛观赛指南出炉 -如果你想熬夜看球，就来看看索" target="_blank">《最后一球》比赛观赛指南出炉 -如果你想熬夜看球，就来看看索</a></li>
                                                        <li><em>16</em><a href="/kejifunen/368052.html" title="《卫报》华为Watch好评！最好用的安卓手表" target="_blank">《卫报》华为Watch好评！最好用的安卓手表</a></li>
                                                        <li><em>17</em><a href="/kejifunen/368011.html" title="《经济学人》：可穿戴设备如何解决身份验证问题" target="_blank">《经济学人》：可穿戴设备如何解决身份验证问题</a></li>
                                                        <li><em>18</em><a href="/kejifunen/367897.html" title="开始使用乐视超级头盔吧！您看到什么效果《琅琊榜》？ " target="_blank">开始使用乐视超级头盔吧！您看到什么效果《琅琊榜》？ </a></li>
                                                        <li><em>19</em><a href="/kejifunen/367752.html" title="联想推出《绝地挑战》AR扩展包，与星球大战8电影同步" target="_blank">联想推出《绝地挑战》AR扩展包，与星球大战8电影同步</a></li>
                                                        <li><em>20</em><a href="/kejifunen/367715.html" title="Oculus虚拟现实电影《亨利》" target="_blank">Oculus虚拟现实电影《亨利》</a></li>
                                                    </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="related_article"></div>
        <div class="footer">
    <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p>
    <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p>
</div>
 
  

        
    </body>
</html>