验证字符串是否为有效颜色

WARNING

此工具仅适用于客户端，请勿在服务器环境中使用。

简单的颜色验证函数

utils.ts

export function isValidColor(color: string) {
  let otpNode = new Option()
  otpNode.style.color = color
 
  return !!otpNode.style.color
}

使用方法

index.ts

// 有效颜色
isValidColor('purple') // true
isValidColor('burlywood') // true
isValidColor('lightsalmon') // true
isValidColor('rgb(255, 255, 255)') // true
isValidColor('rgba(255, 255, 255, .5)') // true
isValidColor('#ccc') // true
isValidColor('hsl(100, 0%, 18%)') // true
 
// 无效颜色
isValidColor('not-a-color-name') // false
isValidColor('dark gray') // false. 应该是 'darkgray'
isValidColor('rgb(255, 255, 255, 1, 1)') // false
isValidColor('#ccczzz') // false

注意事项

像 unset、initial、inherit、currentcolor、transparent 这样的字符串也是有效值，所以如果你想排除这些字符串，只需稍微修改一下函数：

utils.ts

export function isValidColor(color: string) {
  let otpNode = new Option()
  otpNode.style.color = color
 
  return !!otpNode.style.color && !/(unset|initial|inherit|currentcolor|transparent)/i.test(color)
}
 
isValidColor('rgb(-1, 255, 255)') // true
isValidColor('none') // false
isValidColor('initial') // false
isValidColor('gray') // true

工作原理

这个验证器的工作原理是利用了浏览器的内置CSS解析能力：

创建一个新的 Option 元素
尝试将提供的颜色字符串赋值给元素的 style.color 属性
如果浏览器能够解析该颜色，style.color 属性将包含解析后的颜色值
如果无法解析，style.color 属性将为空字符串

支持的颜色格式

此验证器支持所有浏览器认可的颜色格式：

命名颜色: red, blue, darkslategray 等
十六进制: #fff, #ffffff, #rgb, #rrggbb 等
RGB: rgb(255, 0, 0), rgba(255, 0, 0, 0.5) 等
HSL: hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.5) 等
CSS关键字: transparent, currentcolor, inherit 等