HTML的input标签pattern属性校验失败时怎么利用CSS invalid伪类显示红色边框-html教程-PHP中文网

pattern属性需满足三个条件才生效：正则格式正确（无斜杠）、输入框有value值、用户失焦或提交表单；:invalid样式易被:focus或框架覆盖，应使用完整border声明并结合:not(:placeholder-shown)延迟触发。

html的input标签pattern属性校验失败时怎么利用css invalid伪类显示红色边框

pattern属性没生效，:invalid根本不会触发

写了 input:invalid { border-color: red; } 却没反应，八成是 pattern 属性本身没被浏览器识别为有效校验规则。它不像 required 那样“开箱即用”，必须满足三个硬条件：

pattern 值得是完整正则字符串，比如 pattern="[0-9]{3}"，不能写成 pattern="/[0-9]{3}/"（斜杠会当字面量处理）
输入框得有 value（哪怕为空），否则浏览器不触发 pattern 校验——空值默认算通过，除非同时加了 required
用户得失焦（blur）或提交表单，部分浏览器（如 Chrome）不会在输入过程中实时匹配 pattern

典型错误写法：<input pattern="abc"> —— 这个正则只匹配字符串 "abc"，输 "abcd" 就失败；但输空值或 "ab" 反而算 valid。真正想做“必须包含 abc”，得写 pattern=".*abc.*"，不过更推荐用 required + pattern 组合。

:invalid 样式被 :focus 或框架样式盖掉了

边框变红了，但一点击就恢复原色，大概率是 :focus 规则权重更高，或者 UI 框架（如 Bootstrap）重置了 border。别只改 border-color，直接上完整声明：

用 border: 2px solid #d32f2f; 替代 border-color: red;，避免 border-style 或 border-width 缺失导致视觉异常
显式覆盖焦点态：input:invalid:focus { outline: none; border-color: #d32f2f; }
如果用了第三方 CSS，提高选择器权重，比如 input[type="text"]:invalid 或加 !important（仅限兜底）

注意：某些框架会给 input:focus 加蓝色边框或阴影，不重置 outline 的话，红边框+蓝 outline 会叠在一起，难看又难 debug。

想等用户输完再标红？别只靠 :invalid

:invalid 在页面加载后、空 required 输入框就会立刻变红，体验差；而纯 pattern 输入框，没输内容时也永远不触发。要实现“用户输过且错才标红”，得组合伪类：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

给 input 加 placeholder="请输入"，然后用 input:invalid:not(:placeholder-shown) —— 这表示“有内容但不符合 pattern”
更稳妥的方案是监听 blur 事件，JS 调用 input.checkValidity()，手动加 class="invalid"，再写 input.invalid { border: 2px solid red; }
别依赖 :user-invalid 做唯一方案：Firefox 目前不支持，Safari 16.4+ 才开始兼容

实际效果差异明显：input:invalid 可能一打开页面就红一片；input:invalid:not(:placeholder-shown) 至少等用户打过字再响应。

pattern 校验逻辑和 JS 不一致，状态容易不同步

浏览器对 pattern 的匹配是全文匹配（^...$），不是子串匹配。比如 pattern="abc" 只认 "abc"，不认 "xabcx"。这和 JS 的 str.includes("abc") 完全不同。

JS 里用 setCustomValidity("格式错误") 后，:invalid 会立刻生效；但调用 setCustomValidity("") 清除后，样式也会立刻消失——这和 class 切换行为不一致，容易造成视觉残留
如果同时用了 JS 校验和 pattern，建议关掉原生校验：form.novalidate，或移除 pattern 属性，统一用 JS 控制状态
调试时可打印 input.validity.valid 和 input.validity.patternMismatch，比猜 CSS 更快定位是不是 pattern 本身没匹配上