laravel 在 php 中使用正则表达式验证十六进制和 rgba 颜色

Validation hex and rgba colors using regex in php

提问by Abdalla Arbab

I am using Laravel and I am trying to validate a color field. This text box should only allow HEX, rgb, rgba, hsland hslacolors using regex pattern.

我正在使用 Laravel 并且我正在尝试验证颜色字段。该文本框应仅允许HEX，rgb，rgba，hsl和hsla使用正则表达式的颜色。

In my controller I have this pattern but it is not validating my field value. Any string will pass the validation.

在我的控制器中，我有这个模式，但它没有验证我的字段值。任何字符串都将通过验证。

$this->validate($request, [
    'color' => [
        'required',
        'regex:/(#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3}|(?:rgba?|hsla?)\((?:\d+%?(?:deg|rad|grad|turn)?(?:,|\s)+){2,3}[\s\/]*[\d\.]+%?\))/i', // <--- not working
    ],
]);

Thanks.

谢谢。

回答by Thomas Ayoub

You should add anchors (^and $):

您应该添加锚点（^和$）：

'regex:/^(#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3}|(?:rgba?|hsla?)\((?:\d+%?(?:deg|rad|grad|turn)?(?:,|\s)+){2,3}[\s\/]*[\d\.]+%?\))$/i',
        ^                                                                                                                     ^

To make the regex apply to the whole input instead of just match it.

使正则表达式适用于整个输入而不是仅仅匹配它。

But please note that your pattern allows input like rgba(1024, 1023, 0)which is an invalid color.

但请注意，您的模式允许输入rgba(1024, 1023, 0)无效颜色。

---

---

If you want a more bulletproof regex, use this (demo):

如果你想要一个更防弹的正则表达式，使用这个（演示）：

^(\#[\da-f]{3}|\#[\da-f]{6}|rgba\(((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*,\s*){2}((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*)(,\s*(0\.\d+|1))\)|hsla\(\s*((\d{1,2}|[1-2]\d{2}|3([0-5]\d|60)))\s*,\s*((\d{1,2}|100)\s*%)\s*,\s*((\d{1,2}|100)\s*%)(,\s*(0\.\d+|1))\)|rgb\(((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*,\s*){2}((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*)|hsl\(\s*((\d{1,2}|[1-2]\d{2}|3([0-5]\d|60)))\s*,\s*((\d{1,2}|100)\s*%)\s*,\s*((\d{1,2}|100)\s*%)\))$

回答by Sahil Gulati

Hope this will help you out. In the below regex, i am also taking care of spaces as well,

希望这会帮助你。在下面的正则表达式中，我也在处理空格，

1.#[a-zA-Z0-9]{6}for matching string like #090f00

2.rgb\((?:\s*\d+\s*,){2}\s*[\d]+\)this will match string like rgb(10, 10, 20)

3.rgba\((\s*\d+\s*,){3}[\d\.]+\)this will match string like rgba(100,100,100,0.9)

4.hsl\(\s*\d+\s*(\s*\,\s*\d+\%){2}\)this will match string like hsl(10,30%,40%)

5.hsla\(\s*\d+(\s*,\s*\d+\s*\%){2}\s*\,\s*[\d\.]+\)this will match string like hsla(120, 60%, 70%, 0.3)

1.#[a-zA-Z0-9]{6}用于匹配字符串#090f00

2.rgb\((?:\s*\d+\s*,){2}\s*[\d]+\)这将匹配字符串rgb(10, 10, 20)

3.rgba\((\s*\d+\s*,){3}[\d\.]+\)这将匹配字符串rgba(100,100,100,0.9)

4.hsl\(\s*\d+\s*(\s*\,\s*\d+\%){2}\)这将匹配字符串hsl(10,30%,40%)

5.hsla\(\s*\d+(\s*,\s*\d+\s*\%){2}\s*\,\s*[\d\.]+\)这将匹配字符串hsla(120, 60%, 70%, 0.3)

Regex:

正则表达式：

#[a-zA-Z0-9]{6}|rgb\((?:\s*\d+\s*,){2}\s*[\d]+\)|rgba\((\s*\d+\s*,){3}[\d\.]+\)|hsl\(\s*\d+\s*(\s*\,\s*\d+\%){2}\)|hsla\(\s*\d+(\s*,\s*\d+\s*\%){2}\s*\,\s*[\d\.]+\)

Regex demo

正则表达式演示