一个让我改到凌晨的表单校验2019 年我在做一个企业级后台管理系统。其中一个表单有 30 多个字段包含姓名、邮箱、手机号、身份证等复杂校验规则。产品经理要求实时校验并且给用户非常明确的视觉反馈——整个表单项包括标签、输入框、错误提示都要高亮。那时的方案很标准监听每个输入框的input或blur事件手动判断值是否合法然后给父元素.form-group添加has-error类最后显示或隐藏错误消息。代码类似这样constinputdocument.getElementById(email);input.addEventListener(blur,(){constisValid/^[^\s][^\s]\.[^\s]$/.test(input.value);constgroupinput.closest(.form-group);if(!isValid){group.classList.add(has-error);group.querySelector(.error-message).style.displayblock;}else{group.classList.remove(has-error);group.querySelector(.error-message).style.displaynone;}});30 个字段每个字段都要写类似的逻辑。更麻烦的是有些字段有自定义校验规则还要考虑远程校验比如用户名是否已被注册。代码量爆炸而且性能也不好——每次输入都要遍历 DOM。那时候我就在想为什么不能直接用 CSS 来响应表单的校验状态后来 HTML5 表单校验 API:valid、:invalid等伪类逐渐成熟但它们的视觉范围只限于输入框本身。如果你想高亮整个表单项包括标签和错误提示依然需要 JS。直到:has()出来——2023 年底我终于可以丢掉那些 JS 监听器纯 CSS 实现“高亮整个表单项”。现在 2026 年这套方案已经在我经手的所有项目中普及。今天这篇文章我想把:has(input:invalid)实现表单校验视觉反馈的完整思路、代码、最佳实践和踩坑经验分享出来。读完你会发现表单校验的 UI 反馈可以如此优雅。第一章HTML5 表单校验的前世今生1.1 原生校验伪类HTML5 为表单元素引入了两个重要的伪类:valid和:invalid。它们基于输入框的type、required、pattern、min、max等属性自动判断值是否合法。input:valid{border-color:green;}input:invalid{border-color:red;}这看起来很美好但它只影响输入框本身。表单设计里通常需要把整个“表单项容器”包含标签、输入框、帮助文本、错误提示一起高亮并且还要控制错误提示的显示/隐藏。1.2 传统 JS 方案的痛点重复逻辑每个字段都要绑定事件、写校验规则、操作 DOM 类。校验规则不统一有些用原生属性有些用自定义 JS容易遗漏。性能问题大量字段时每个事件都触发 DOM 操作可能引起重排。可访问性动态添加/移除类时屏幕阅读器可能无法及时获得状态变化需要额外aria属性。与后端校验重复前端校验逻辑和后端校验逻辑往往两套维护成本高。1.3:has()带来的转机:has()让 CSS 能够根据子元素的状态来选择父元素。于是我们可以.form-group:has(input:invalid){/* 当内部的 input 无效时高亮整个 .form-group */}这样一来校验逻辑完全由浏览器原生 API:invalid驱动CSS 只负责视觉反馈JS 只需要在提交时做一次完整校验或者根本不需要实时校验的 JS。这不仅是代码量的减少更是职责分离的胜利。第二章基础实现 —— 纯 CSS 高亮整个表单项2.1 HTML 结构采用经典的表单项结构divclassform-grouplabelforemail邮箱地址/labelinputtypeemailidemailnameemailrequireddivclasshelp-text请输入常用邮箱我们将发送验证邮件/divdivclasserror-message请输入有效的邮箱地址/div/div.form-group是容器。input带有required和typeemail浏览器会自动校验。.error-message默认隐藏仅在:invalid时显示。2.2 CSS 核心/* 默认样式 */.form-group{margin-bottom:1.5rem;padding:0.75rem;border-radius:8px;transition:background-color 0.2s,border-color 0.2s;border:1px solid transparent;}/* 无效状态高亮背景和边框 */.form-group:has(input:invalid){background-color:#fff5f5;border-color:#e53e3e;}/* 标签也变红 */.form-group:has(input:invalid) label{color:#e53e3e;font-weight:600;}/* 输入框本身变红 */.form-group:has(input:invalid) input{border-color:#e53e3e;outline-color:#e53e3e;}/* 显示错误消息 */.form-group:has(input:invalid) .error-message{display:block;color:#e53e3e;font-size:0.75rem;margin-top:0.25rem;}/* 正常状态下隐藏错误消息 */.error-message{display:none;}就这么简单当用户输入无效邮箱时浏览器自动给input添加:invalid伪类然后:has()捕获这个状态给.form-group及其后代应用错误的视觉样式。完全不需要 JavaScript。2.3 处理首次加载时不显示错误原生:invalid会在页面加载时立即生效如果输入框为空且required。这会导致用户还没填任何东西表单项就红了体验很差。解决方案利用:placeholder-shown或:blank伪类来抑制初始状态。或者用 JS 在用户第一次交互后才添加“被触碰”标志。但为了纯 CSS更推荐使用:not(:placeholder-shown)来匹配已经填写的输入框。/* 只有输入框有内容非空且无效时才高亮 */.form-group:has(input:not(:placeholder-shown):invalid){background-color:#fff5f5;border-color:#e53e3e;}另外:blank伪类也可以用于判断输入框是否为空支持contenteditable但表单元素建议:placeholder-shown。更全面的做法是结合:user-invalid用户交互后才触发的伪类但目前浏览器支持有限。2.4 支持多种输入类型.form-group:has(input:invalid), .form-group:has(textarea:invalid), .form-group:has(select:invalid){/* 统一的高亮样式 */}或者使用:is()简化.form-group:has(:is(input, textarea, select):invalid){}第三章增强用户体验 —— 实时 vs 失焦校验3.1 实时校验的利与弊实时校验每次按键都触发反馈及时但可能过于激进。用户刚输入一个字母就提示错误容易让人烦躁。最佳实践是失焦时第一次校验之后实时校验。纯 CSS 无法实现“仅失焦后实时”的逻辑因为:invalid是实时更新的。但我们可以结合简单的 JS 来管理“touched”状态而视觉反馈依然大部分用 CSS。divclassform-groupdata-touchedfalse.../divconstgroupsdocument.querySelectorAll(.form-group);groups.forEach(group{constinputgroup.querySelector(input, textarea, select);input.addEventListener(blur,(){group.setAttribute(data-touched,true);});});然后在 CSS 中.form-group[data-touchedtrue]:has(input:invalid){/* 只有被触碰过的表单项才显示错误样式 */}这样用户不会在初次加载时看到红色框也不会在输入过程中立即报错而是等他们离开输入框后才显示。再次编辑时又会实时更新体验更好。3.2 配合:focus-within如果你想在用户正在编辑某个字段时暂时隐藏错误等离开后再显示可以结合:focus-within/* 当输入框有焦点时不显示错误高亮或显示不同样式 */.form-group:has(input:focus):has(input:invalid){background-color:#fffbea;border-color:#f59e0b;}这样用户集中编辑时错误提示不会干扰但不是完全隐藏而是换成一种温和的警告色。3.3 提交时的全局校验即使有了实时视觉反馈在点击提交按钮时还应做一次完整校验如果有无效字段滚动到第一个错误并聚焦。document.querySelector(form).addEventListener(submit,(e){constfirstInvaliddocument.querySelector(.form-group:has(input:invalid) input);if(firstInvalid){e.preventDefault();firstInvalid.focus();firstInvalid.scrollIntoView({behavior:smooth,block:center});}});这里:has(input:invalid)再次派上用场。第四章进阶技巧 —— 自定义校验规则4.1 使用pattern属性HTML5 的pattern属性可以定义正则表达式浏览器会自动判断:invalid。inputtypetextpattern[A-Za-z]{3,}title至少3个字母4.2 自定义校验逻辑与setCustomValidity有些复杂校验如密码强度、用户名唯一性必须用 JS。但我们可以通过setCustomValidity让浏览器原生伪类生效。constpassworddocument.getElementById(password);password.addEventListener(input,(){if(password.value.length8){password.setCustomValidity(密码至少8位);}else{password.setCustomValidity();}});一旦调用setCustomValidity(错误消息)输入框就会变成:invalid状态CSS 自动应用错误高亮。同时表单提交时会阻止提交并弹出提示但可以禁用原生弹窗。这种方式结合了 JS 的灵活性和 CSS 的视觉反馈是纯 CSS 无法实现校验逻辑时的最佳搭档。4.3 异步校验如用户名唯一性异步校验需要等待服务器响应期间输入框可能短暂处于:invalid状态。建议在校验期间显示 loading 图标校验完成后根据结果调用setCustomValidity。constusernamedocument.getElementById(username);username.addEventListener(blur,async(){constexistsawaitcheckUsernameExists(username.value);if(exists){username.setCustomValidity(用户名已被占用);}else{username.setCustomValidity();}});CSS 中:has(input:invalid)会自动响应。异步过程中你可以添加一个data-validating属性来显示特殊样式。第五章可访问性考量5.1 确保屏幕阅读器能读出错误原生 HTML5 校验会在提交时弹出自带提示但视觉反馈需要配合aria属性。divclassform-grouparia-livepolitelabelforemail邮箱/labelinputtypeemailidemailrequiredaria-describedbyemail-errordividemail-errorclasserror-messagerolealert/div/div当.form-group:has(input:invalid) .error-message显示时rolealert会让屏幕阅读器自动读出错误内容。aria-describedby建立了输入框和错误消息的关联。5.2 高亮不仅仅是颜色变化WCAG 要求错误提示不能仅依赖颜色。必须提供额外的视觉线索比如边框、图标、文本。:has(input:invalid)可以同时改变背景、边框、显示文本满足要求。5.3 焦点管理校验失败后应将焦点定位到第一个无效字段。前面提交事件中已经做了。还要把错误消息关联到输入框以便屏幕阅读器知晓。第六章完整示例 —— 一个带实时校验的联系表单下面是一个完整的联系表单 HTML/CSS/JS使用:has()实现高亮结合了 touched 状态和提交校验。HTMLformidcontactFormdivclassform-groupdata-touchedfalselabelforname姓名/labelinputtypetextidnamenamenamerequiredplaceholder请输入真实姓名divclasserror-message姓名不能为空/div/divdivclassform-groupdata-touchedfalselabelforemail邮箱/labelinputtypeemailidemailnameemailrequireddivclasserror-message请输入有效的邮箱/div/divdivclassform-groupdata-touchedfalselabelforphone手机号/labelinputtypetelidphonenamephonepattern1[3-9]\d{9}requireddivclasserror-message请输入11位手机号/div/divbuttontypesubmit提交/button/formCSS.form-group{margin-bottom:1.5rem;padding:0.75rem;border-radius:8px;transition:all 0.2s;}.error-message{display:none;font-size:0.75rem;margin-top:0.25rem;color:#d32f2f;}/* 仅当表单项被触碰过且无效时才高亮 */.form-group[data-touchedtrue]:has(:is(input, textarea, select):invalid){background-color:#ffebee;border-left:4px solid #d32f2f;}.form-group[data-touchedtrue]:has(:is(input, textarea, select):invalid) label{color:#d32f2f;}.form-group[data-touchedtrue]:has(:is(input, textarea, select):invalid) .error-message{display:block;}JavaScript// 标记 touchedconstgroupsdocument.querySelectorAll(.form-group);groups.forEach(group{constinputgroup.querySelector(input, textarea, select);if(!input)return;input.addEventListener(blur,(){group.setAttribute(data-touched,true);});// 对于异步校验也可以监听 input 事件但 blur 足够});// 提交时检查document.getElementById(contactForm).addEventListener(submit,(e){// 先一次性将所有表单项标记为 touched如果还没标记groups.forEach(gg.setAttribute(data-touched,true));constfirstInvaliddocument.querySelector(.form-group[data-touchedtrue]:has(input:invalid) input);if(firstInvalid){e.preventDefault();firstInvalid.focus();firstInvalid.scrollIntoView({behavior:smooth,block:center});}});这个例子完全实现了初次加载无红色用户离开输入框后如果未通过校验才高亮再次编辑实时更新提交时自动跳转到第一个错误。第七章性能与高级技巧7.1 大规模表单优化如果表单有上百个字段:has()的实时评估可能会对性能产生轻微影响。建议使用:has()配合data-touched属性只对已经被触碰的字段进行复杂评估。避免在:has()内部使用深度选择器尽量用直接子代。利用:is()组合多种输入类型减少重复。7.2 与 Web Components 结合在 Shadow DOM 中:host可以配合:has():host(:has(input:invalid)){border-left:4px solid red;}这非常适用于封装自定义表单组件。7.3 兼容性降级对于不支持:has()的浏览器如旧版 Safari 15.4 之前或某些 WebView你需要提供回退方案/* 不支持 :has 时使用 JS 添加的错误类 */.form-group.has-error{background-color:#ffebee;}/* 通过 supports 检测 */supportsnotselector(:has(a)){/* 优雅降级依靠 JS 添加的类 */}同时JS 中可以用MutationObserver或监听input事件来添加/移除has-error类模拟:has()行为。但既然 2026 年主流浏览器已全面支持不必过度担心。第八章真实项目复盘 —— 从 300 行 JS 到 30 行 CSS我在 2024 年重构了一个用户注册表单原有代码用了 300 行 JS 来做实时校验、错误显示、焦点管理。重构后CSS 约 40 行含各种状态JS 仅用于提交时的全局校验和 touched 标记约 15 行校验规则完全由 HTML5 属性required,pattern,type和少量setCustomValidity完成。结果代码可读性大幅提升维护成本骤降 Bug 数量接近于零。产品经理说“现在的错误提示看起来舒服多了”其实背后的区别只是我们从命令式 DOM 操作变成了声明式 CSS。第九章未来 ——:user-invalid伪类CSS Selectors Level 4 还定义了:user-invalid伪类它专门用于“用户已经与表单交互后”才触发的无效状态。一旦广泛支持我们将不再需要data-touched变量直接.form-group:has(input:user-invalid){background-color:#ffebee;}而且:user-invalid还能区分用户是否“已经尝试提交”等情况。目前2026 年Chrome 和 Safari 已支持:user-invalid和:user-valid但 Firefox 仍需加 flags。不久的将来我们可以彻底告别 touched 标记。第十章总结 —— CSS 接管表单反馈的时代:has(input:invalid)是现代 CSS 中最能够体现“声明式 UI”优越性的场景之一。它让我们把业务逻辑校验和表现逻辑视觉反馈彻底分离HTML定义表单结构和校验规则required,pattern, 等。CSS负责根据状态显示合适的视觉效果高亮、错误消息。JS只处理提交时的全局校验和异步校验。这种分离带来了巨大的可维护性和可读性。而且性能上浏览器原生实现的:invalid和:has()比大多数 JS 监听器更高效。如果你还在用 jQuery 或原生 JS 每个字段绑定事件、动态添加类请立刻停止。花 30 分钟理解:has()你的表单代码将变得优雅、简洁、可靠。最后送上两条建议渐进增强在不支持:has()的极少数旧浏览器中用supports回退到 JS 方案。始终考虑可访问性颜色变化要配合文本、图标、aria 属性。这篇文章能让你彻底告别表单校验的 JS 地狱拥抱 CSS 的新时代。