0
385
ViewsValidation hex and rgba colors using regex in php
I am using Laravel and I am trying to validate a color field.
This text box should only allow HEX, rgb, rgba, hsl and hsla colors using regex pattern.
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.
2 answers
Answer question0
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.
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*%)\))$
0
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#090f002.
rgb\((?:\s*\d+\s*,){2}\s*[\d]+\)this will match string likergb(10, 10, 20)3.
rgba\((\s*\d+\s*,){3}[\d\.]+\)this will match string likergba(100,100,100,0.9)4.
hsl\(\s*\d+\s*(\s*\,\s*\d+\%){2}\)this will match string likehsl(10,30%,40%)5.
hsla\(\s*\d+(\s*,\s*\d+\s*\%){2}\s*\,\s*[\d\.]+\)this will match string likehsla(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\.]+\)