如何在JavaScript中创建仅接受rgba、rgb、哈希码等颜色代码的变量？

要创建一个仅允许输入hex、rgb、rgba格式颜色代码的变量，核心思路是通过正则表达式验证颜色格式合法性，再结合Object.defineProperty的getter/setter机制，确保每次赋值都经过校验。

1. 编写颜色验证函数 #

先实现一个校验函数，覆盖常见的合法颜色格式：

• 3位或6位十六进制哈希码（支持大小写）
• RGB格式（支持0-255整数或0%-100%百分比值）
• RGBA格式（在RGB基础上增加0-1的alpha值或百分比）

function isValidColor(color) {
  // 匹配3/6位十六进制颜色
  const hexPattern = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
  // 匹配RGB（整数/百分比）
  const rgbPattern = /^rgb\(\s*(0|[1-9]\d?|1\d\d|2[0-4]\d|25[0-5])\s*,\s*(0|[1-9]\d?|1\d\d|2[0-4]\d|25[0-5])\s*,\s*(0|[1-9]\d?|1\d\d|2[0-4]\d|25[0-5])\s*\)$|^rgb\(\s*(0%|100%|\d{1,2}%)\s*,\s*(0%|100%|\d{1,2}%)\s*,\s*(0%|100%|\d{1,2}%)\s*\)$/;
  // 匹配RGBA（整数/百分比 + alpha值）
  const rgbaPattern = /^rgba\(\s*(0|[1-9]\d?|1\d\d|2[0-4]\d|25[0-5])\s*,\s*(0|[1-9]\d?|1\d\d|2[0-4]\d|25[0-5])\s*,\s*(0|[1-9]\d?|1\d\d|2[0-4]\d|25[0-5])\s*,\s*(0|1|0?\.\d+)\s*\)$|^rgba\(\s*(0%|100%|\d{1,2}%)\s*,\s*(0%|100%|\d{1,2}%)\s*,\s*(0%|100%|\d{1,2}%)\s*,\s*(0%|100%|\d{1,2}%)\s*\)$/;

  return hexPattern.test(color) || rgbPattern.test(color) || rgbaPattern.test(color);
}

2. 创建受限制的变量 #

使用Object.defineProperty给变量添加赋值校验逻辑，非法值会直接抛出错误：

// 内部存储变量
let _restrictedColor;

// 定义全局或局部的受限制变量
Object.defineProperty(this, 'restrictedColor', {
  get() {
    return _restrictedColor;
  },
  set(value) {
    if (isValidColor(value)) {
      _restrictedColor = value;
      console.log(`颜色赋值成功：${value}`);
    } else {
      throw new Error(`无效的颜色代码：${value}，仅支持hex、rgb、rgba格式`);
    }
  },
  enumerable: true,
  configurable: true
});

3. 测试使用 #

// 合法赋值示例
restrictedColor = '#f0f';          // 3位hex，成功
restrictedColor = '#FF00CC';       // 6位hex，成功
restrictedColor = 'rgb(255, 0, 127)'; // RGB整数，成功
restrictedColor = 'rgb(50%, 0%, 100%)'; // RGB百分比，成功
restrictedColor = 'rgba(0, 0, 0, 0.7)'; // RGBA小数alpha，成功
restrictedColor = 'rgba(100%, 0%, 0%, 50%)'; // RGBA百分比alpha，成功

// 非法赋值示例（会抛出错误）
try {
  restrictedColor = 'red'; // 颜色名称不支持
  restrictedColor = 'rgb(300, 0, 0)'; // 数值超出范围
  restrictedColor = 'rgba(0,0,0)'; // 缺少alpha参数
} catch (err) {
  console.error(err.message);
}

扩展说明 #

• 如果需要支持HSL/HSLA格式，可以新增对应的正则表达式并加入验证逻辑
• 若不需要严格校验数值范围（比如允许rgb(300,0,0)这种浏览器会自动修正的值），可以简化正则中的数值匹配部分

内容的提问来源于stack exchange，提问作者Gunjan Dalwadi