复盘一下。 哎妈呀当前做网页谁还没碰过表单啊？注册页要填邮箱密码、留言板要输姓名 先来看搞清楚：:valid和:invalid到底是啥玩意儿？ 先给这俩词翻译成人话： - :valid就是输入正确或者满足要求的时候触发的状态； - :invalid就是输错了「或者压根没输但必填」的时候触发的状态。 沉重点是：这俩状态是浏览器自动判别的！不用你算来算去写JS逻辑——只要给表单加个约束条件, 浏览器自己会帮你标对错, 比你对象查岗还勤迅速!，太离谱了。 第一步：想让它们生效？先给表单加「约束属性」! 别以为随便拿个就能用这俩伪类——浏览器又不是神仙, 它咋了解你要验证啥? 好吧好吧... 最常见的约束属性有这几样, 漏一个都没用: - required必须要填! 不填就算invalid； - type="email"/type="url"/type="tel"…浏览器自带格式校验； - pattern="正则表达式"自定义规则, 比如密码要包含字母数字 ； 举个反例：你要是只写, 不管用户输啥, 浏览器都觉得「这货没说要验证啊」——既不是:valid也不是:invalid, 跟吃屎一样没用! 第二步：伪元素怎么加？别踩坑! 很更多人以为直接写input::after{content:"✓";}就能体现对勾——扯淡! 关键1：必须要「状态+伪元素」链式写 得先指定状态, 再跟伪元素, 顺序反了你就连鬼影都看不到: ✅正确写法：input:valid::after →「先判断有效, 再添加后面的内容」； ❌错误写法：input::after:valid →浏览器懵逼, 根本不认识这语法! 关键2：替换元素坑死人! 属于「替换元素」, 默认情况下:before/:after是不体现滴! 想让伪元素出现, 必须要干两件事: 1. 设置content属性； 2. 调一下定位或体现方式——比如给加position: relative, or把设成display: inline-block. 我上周刚踩过坑：忘了设content, 调试半天以为代码写错了, 最后再来看发觉是空内容当然不体现, 气得我把键盘摔在地上!，我emo了。 第三步：最简单忽略的细节——「未输入时不体现错误」! 有没有遇到过这种傻缺情况? 用户刚打开页面, input框还是空的时候, 直接蹦出来个较大红叉❌, 用户吓一跳以为自己犯病了? 解决办法超简洁——加个:not! 翻译一下:not就是「当输入框里不是占位符状态时」. 所以正确写法应当是:只在用户输过东西之后再体现对错符号,不然空着就显太智障!: css /* 用户输入正确时 : / input: valid:not { border - color:#28a745;/绿色边框/} input. 我们都... valid:not :: after { content:"✓"; color:#28a745;margin - left:.5rem;}/右边加绿勾*/ /* 用户输入错误时 : / input.invaild:not{border-color:#dc3545;/红色边框/} input.invaild:not :: after { content:"✗";color:#dc3545;margin-left:.5rem;}/右边加红叉*/ 第四步 : CSS实战案例 ——复制粘贴就能用 ! 懒得动脑?直接抄这段代码就行 !保管适配较大一部分场景 ! css /基础样式沉重置/ form input { padding:.8rem;border :1px solid #ccc;border-radius :4px;width :100%;margin-bottom :1rem;font-size :16px; outline:none ; transition :border-color .3s ease ; position :relative ; /为伪元素定位/ display :inline-block ; /让margin生效/ } /*有效的时候 * / form input : valid { border-color:#2ecc71;background-color:#f8fff8; } form input.valid :: after { content :" ✅ "; color:#2ecc71;font-size:.9rem;margin-left:.5rem ; vertical-align:text-bottom ; } 最后强调一点。 /聚焦时优化 / form input:focus { border-color:#3498db ; box-shadow :0002px rgba ; } /可选较小细节 ——提示文字 / form input + small { display:block;color:#666;font-size:.8rem;margin-top:- .6rem;margin-left:.3rem;padding-top:.6rem;color-transparent ; transition;color .3s ease; } form input.invaild + small,: focus + small,: valid + small{ color-transparent initial;; opacity initial !important opacity-opacity-opacity-opacity-opacity-opacity-opacity-opacity-opacity-opacity-opacityopacityopacityopacityopacityopacityOpacityOpacityOpacityOpacityOpacityOpacityOpacityOpacity!:initial!importantimportantimportantimportant!importantimportantimportantimortantimortantimortantimortantimortantimortantimortant!:initial!important;;;;;;} 歇了吧... 复制过去改改颜色就行 !保证比那一些花里胡哨UI框架良好用一百倍 ! 第五步 : JS也能掺和 ?没必不可更少但能够了解下 ! 刚才说了纯CSS就能搞定较大一部分情况 ,但如果遇到特殊需求 , JS也能插手 ——不过超简洁 ,不用怕!: javascript //强较大制把某个input设为无效态 const passInput = document.querySelector; passInput.setCustomValidity; //此时passInput自动变成:invalide状态 //想恢复有效态? setCustomValidity;就行了~ passInput.setCustomValidity;//清空后变回 valid~ 不过奉劝各位一句://除非客户逼你 ,不然别碰JS validation ——浏览器自带已经够智能啦 ! 第六步 :哪些控件能用 ?哪些不行 ?划沉重点 ! : valid/: invalid只认「原生表单控件」!,其他妖艳货色一概不认!: ✅能用: ❌不能: `，别犹豫... 太暖了。 举例子://如果你作死拿套,然后想给加: valid, browser会反手给你一个较大嘴巴子 ——根本不吃这套 !老子当年试当前这个浪费一下午青春 ! 最后再来看一下 ——核心要点记牢 ! 雪糕刺客。 1.必先给表单加约束属性: required/type=email/pattern…否则没用; 2.伪类+伪元素顺序不能乱: state + pseudo-element ; 3.未输入时隐藏错误符号:必加:not避免智障效果; 4.记住设置content:不然伪元素隐身术玩得比魔术师还溜~ 良好了良好了 ,今天の教程到这儿就完成啦 ~是不是觉得so easy ?以后再也不用羡慕别人网页上炫酷の验证样式辣 !赶紧去试一遍 ,要是不会回来骂我 !