正在验证html颜色代码
正在验证html颜色代码
提问于 2010-05-12 22:17:58
我正在寻找代码，以验证html颜色代码。想检查用户是否输入了有效的颜色代码，你能帮上忙吗？
我知道我需要正则表达式的东西，但是我不能理解关于正则表达式的东西：
谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-05-12 22:21:13
您可以像这样匹配十六进制颜色：
if (/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(str)) {
//Match
}请注意，这不会处理名称或rgb(n, n, n)。
您可以像这样匹配rgb(x, y, z)颜色：
if (/^rgb\s*(\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*)$/i.test(str)) {
//Match
}请注意，这将与rgb(299, 299, 299)匹配。
Stack Overflow用户
发布于 2015-02-11 04:13:12
您可以创建一个抽象元素，并尝试将颜色应用于该元素：
function validate_color(c) {
var litmus = 'red';
var d = document.createElement('div');
d.style.color=litmus;
d.style.color=c;
//Element's style.color will be reverted to litmus or set to '' if an invalid color is given
if( c !== litmus && (d.style.color === litmus || d.style.color === '')){
return false;
}
return true;
}Stack Overflow用户
发布于 2020-04-10 05:21:52
现在是2020年，所以我为此创建了一个 npm 包： https://www.npmjs.com/package/validate-color
它通过name、hex、rgb、rgba、hsl或hsla值来验证HTML颜色。
- 验证所有可能的HTML颜色
import validateColor from 'validate-color';用法：
import React from 'react';
import validateColor from 'validate-color';
const ColorBox = props => {
const {
color = '',
text = ''
} = props;
const theColor = color && validateColor(color) ? color : 'transparent';
return (
<div className="color-box" style={{backgroundColor: theColor}}>
<p>{text}</p>
</div>
)
};
export default ColorBox;没有name，
- 仅验证HTML颜色(
hex、rgb、rgba、hsl、hsla)
import { validateHTMLColor } from 'validate-color';仅验证颜色hex的
import { validateHTMLColorHex } from 'validate-color';仅验证颜色name的
import { validateHTMLColorName } from 'validate-color';还有一个演示页面，展示了应用于React组件的验证：
https://dreamyguy.github.io/validate-color/
在那里，您将找到指向GitHub代码库的链接。为了更好地衡量，已经编写了大量的测试。我接受拉取请求，开源万岁！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2819619
复制相关文章
相似问题
腾讯云开发者
