使用正则表达式验证文本输入字段的内联样式？

Question

I have a simple text field which I need to validate with a regex.
The text field is supposed to contain inline-styles in the "proper" format xxx: xxx;

Ex: font-size: 15px; background: #33333; -webkit-transition: background-color 500ms ease-out 1s;

Any regex gurus out there help me out here. I'll eventually find the solution on my own but that may take awhile.

Languages would be javascript for client side validation then moving onto php for the server side validation.

Thanks a bunch guys... I came up with this -- /([az-]+: [0-9a-z#(). -]+;$)/g --. I would answer myself but I'm unsure if its the best solution.

Gonna accept the most detailed answer below from @nu11p01n73R as I stole the $ sign from his explanation that made the above work right.

Now is there an issue with what I came up with? Know I'm not technically supposed to ask but I think its easier to read for me to read, anyways. I love SO.

Answer 1

You can use a regex of the form

^([^:]+:[^;]+;)+$

see for example http://regex101.com/r/cE6yS6/3

• ^ anchors the regex at the begining of the string. ensures that nothing presceds the matched string

• [^:]+: matches anything other than : followed by a :

• [^;]+; matches anything other than ; followed by ;

• + quantifier, repeats the occurence of property:value;

• $ anchors the regex at the end of the string. Ensures nothing follows the matches string.

Answer 2

try this better solution :

^([a-zA-Z\-\s]+:[a-zA-Z0-9\-\s#%\(\)\+']*;)+$

it handles exception case:

ex1=font-size: 15px; background: #33:333; //not match
ex2=font-size: 15px; background: #33333;  //match

for html:

<input type="text"  pattern="^([a-zA-Z\-\s]+:[a-zA-Z0-9\-\s#%\(\)\+']*;)+$" style="width: 1000px;"/>