如何通过正则表达式检验 HTML 颜色格式

应使用结构化正则校验HTML颜色：/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/校验十六进制色码，/^rgb(s*(0|1d{0,2}|2[0-4]d|25[0-5])s*,s*(0|1d{0,2}|2[0-4]d|25[0-5])s*,s*(0|1d{0,2}|2[0-4]d|25[0-5])s*)$/i校验RGB函数，需配合trim和大小写统一预处理，避免依赖DOM验证。

直接用正则表达式验证 HTML 颜色格式，关键是覆盖标准写法、排除“看似合法实则无效”的字符串，并兼顾实际使用场景（比如空格、大小写、简写）。不能只看长度和字符范围，还得确保每个字符都是真正的十六进制字符（0–9、a–f、A–F）。

只校验十六进制颜色码（#RRGGBB 和 #RGB）

这是最常见也最需严谨处理的格式。标准要求：

• 必须以 # 开头
• 后面只能是 3 位 或 6 位 十六进制字符（不允许 4、5、7 位等）
• 所有字母仅限 a–f / A–F，g、z、l 等不是合法十六进制字符，正则必须排除
• 大小写不敏感，但正则里要显式包含大小写范围

推荐正则：/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/

注意：末尾的 $ 很关键，防止匹配到类似 #123abc extra 这种带多余内容的字符串。

立即学习“前端免费学习笔记（深入）”；

支持 RGB 函数格式（rgb(r,g,b)）

RGB 格式更复杂，因为要校验数字范围（0–255）和可选空格。常见错误包括：

• 数字超出 255（如 rgb(256,0,0)）
• 逗号前后有空格但正则没考虑（如 rgb( 12 , 34 , 56 )）
• 括号缺失或错用中文符号

稳妥的正则示例：

/^rgb(s*(0|1d{0,2}|2[0-4]d|25[0-5])s*,s*(0|1d{0,2}|2[0-4]d|25[0-5])s*,s*(0|1d{0,2}|2[0-4]d|25[0-5])s*)$/i

说明：
– s* 允许任意空白（空格、制表符等）
– 每个数字组用 (0|1d{0,2}|2[0-4]d|25[0-5]) 精确覆盖 0–255
– /i 修饰符让 rgb/RBG/RGB 等大小写都通过

预处理比硬套正则更可靠

正则本身无法处理所有边界情况。建议先做轻量预处理：

• 用 trim() 去掉首尾空格，避免 " #fff " 导致匹配失败
• 对输入统一转小写（或大写），简化正则书写，也避免大小写混用干扰
• 如果业务允许，可把 #RGB 自动扩展为 #RRGGBB 再校验（如 #abc → #aabbcc），减少分支逻辑

别依赖浏览器 style 设置来验证

曾有人用 el.style.color = input; if (el.style.color) 判断是否合法——这不可靠：

• Chrome 对非法值（如 #ggg）会静默 fallback 到 #ffffff，不抛错
• Firefox 可能保留原值但渲染异常，无法从 JS 获取有效反馈
• 不同浏览器解析策略不一致，导致验证结果不可移植

真正可控的方式，还是用结构化正则 + 数值范围校验，不依赖 DOM 渲染行为。