十六进制颜色代码校验应使用/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/确保完整匹配3位或6位，支持大小写；需注意^$锚定、大小写兼容及避免{3,6}误匹配。
校验十六进制颜色代码，核心是匹配以 # 开头、后跟 3 位或 6 位十六进制字符（0–9、a–f、A–F）的字符串。
基础正则表达式写法
最常用且准确的正则为：
/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/
- ^ 和 $ 确保完整匹配，避免部分匹配（如 "#123abcxyz" 被误认为合法）
- [0-9A-Fa-f] 匹配任意一位十六进制字符，大小写均支持
- {3} 匹配简写格式（如 #fff），{6} 匹配标准格式（如 #ff6b6b）
- 用 | 表示“或”，覆盖两种常见长度
支持带 alpha 通道的 8 位格式（可选扩展）
若需兼容含透明度的 8 位 hex（如 #ff6b6bff），可扩展为：
/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/
- 注意：CSS 原生不支持 #RGBA 或 #RRGGBBAA 写法（除部分新浏览器实验性支持外），实际项目中建议优先用 rgba() 或 CSS 变量替代
- 若用于数据校验而非 CSS 渲染，可按业务需求保留 {8} 分支
实用校验函数封装
直接在代码中调用更清晰：
function isValidHexColor(str) {
return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(str);
}
// 使用示例
console.log(isValidHexColor("#fff")); // true
console.log(isValidHexColor("#FF6B6B")); // true
console.log(isValidHexColor("#ggg")); // false
console.log(isValidHexColor("fff")); // false（缺 #）
console.log(isValidHexColor("#1234")); // false（长度非法）
常见易错点提醒
- 漏写 ^ 和 $ → 导致 "#1234567" 也被判定为 true（因中间 "123456" 被匹配）
- 未限定大小写 → 单写
[a-f]会拒绝 "#ABC"；应写成[0-9A-Fa-f]或加 i 标志（如/^#([0-9A-F]{3}|[0-9A-F]{6})$/i） - 混淆简写与标准写法 → #abc 等价于 #aabbcc，但正则中不能用 {3,6}，因为 #abcd 也会被误匹配（{3,6} 表示 3 到 6 位连续，非“仅 3 或仅 6”）
