pattern属性需满足三个条件才生效：正则格式正确（无斜杠）、输入框有value值、用户失焦或提交表单；:invalid样式易被:focus或框架覆盖，应使用完整border声明并结合:not(:placeholder-shown)延迟触发。
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。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
想等用户输完再标红？别只靠 :invalid
:invalid 在页面加载后、空 required 输入框就会立刻变红，体验差；而纯 pattern 输入框，没输内容时也永远不触发。要实现“用户输过且错才标红”，得组合伪类：
- 给 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 本身没匹配上
最麻烦的点在于：pattern 写错、浏览器不触发 invalid、样式被覆盖、JS 和原生状态打架——这四个问题经常同时出现，得一个个排除，别指望一行 CSS 解决所有。
