这里有不同的选择:
1. 使用虚拟元素
使用浏览器的验证。创建一个dummyHTML 元素,分配颜色并检查是否已设置。这是迄今为止最好的选择。它不仅更容易,而且还允许向前兼容。
function CheckValidColor(color) {
var e = document.getElementById('divValidColor');
if (!e) {
e = document.createElement('div');
e.id = 'divValidColor';
}
e.style.borderColor = '';
e.style.borderColor = color;
var tmpcolor = e.style.borderColor;
if (tmpcolor.length == 0) {
return false;
}
return true;
}
// function call
var inputOK = CheckValidColor('rgb( 0, 0, 255)');
这将返回true
适用于浏览器接受的所有颜色,即使在您可能认为无效的情况下也是如此。
2. 使用正则表达式捕获数字并在代码中验证
如果你捕捉到任何东西看起来像一个数字,您将能够单独验证每个参数IF clauses
。这将使您能够向用户提供更好的反馈。
a) #hex:
^(#)((?:[A-Fa-f0-9]{3}){1,2})$
还捕获哈希值以与以下表达式保持一致。DEMO https://regex101.com/r/yF0uY1/1
b) rgb()、rgba()、hsl() 和 hsla():
^(rgb|hsl)(a?)[(]\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*,\s*([\d.]+\s*%?)\s*(?:,\s*([\d.]+)\s*)?[)]$
这将为函数和每个参数创建捕获。DEMO https://regex101.com/r/yF0uY1/2
3. 使用一个怪物正则表达式进行验证:
不推荐使用此选项,主要是因为它很难阅读,它不能保证匹配所有用例,并且如果您尝试调试它,它会让您头疼。以下正则表达式验证允许的参数数量和范围。
a) #hex: ^#(?:[A-Fa-f0-9]{3}){1,2}$
DEMO https://regex101.com/r/yF0uY1/3
b)RGB(): ^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$
DEMO https://regex101.com/r/yF0uY1/4
c) rgba(): ^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$
DEMO https://regex101.com/r/yF0uY1/5
d) hsl(): ^hsl[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*[)]$
DEMO https://regex101.com/r/yF0uY1/6
e) hsla(): ^hsla[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*,\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$
DEMO https://regex101.com/r/yF0uY1/7
现在都在一起了:
通过上面的表达式,我们可以创建这个单行代码来验证所有合法的颜色值:
^(?:#(?:[A-Fa-f0-9]{3}){1,2}|(?:rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}|hsl[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*|(?:rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}|hsla[(]\s*0*(?:[12]?\d{1,2}|3(?:[0-5]\d|60))\s*(?:\s*,\s*0*(?:\d\d?(?:\.\d+)?\s*%|\.\d+\s*%|100(?:\.0*)?\s*%)){2}\s*,)\s*0*(?:\.\d+|1(?:\.0*)?)\s*)[)])$
DEMO https://regex101.com/r/yF0uY1/8
或者正则表达式爱好者可以检查一下巨大的正则表达式 https://regex101.com/r/yF0uY1/9,有 148 个颜色名称。但我绝不会建议使用这种模式。请使用第一个选项,创建一个虚拟元素,这是覆盖浏览器所有用例的唯一方法。