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

Question

我有一个简单的文本字段，我需要用正则表达式进行验证 文本字段应包含“正确”格式xxx：xxx;

的内联样式

Ex：font-size：15px;背景：＃33333; -webkit-transition：background-color 500ms ease-out 1s;

那里的任何正则表达专家都会帮助我。我最终会自己找到解决方案，但这可能需要一段时间。

语言将是用于客户端验证的javascript，然后转移到php以进行服务器端验证。

谢谢一群人......我想出了这个 - /（[a-z - ] +：[0-9a-z＃（）。 - ] +; $）/ g - 。我会自己回答，但我不确定它是否是最好的解决方案。

接受下面@ nu11p01n73R中最详细的答案，因为我从他的解释中偷走了$ sign，这使得上述工作正常。

现在我想出了什么问题？知道我在技术上不应该问，但我觉得它更容易阅读，无论如何。我喜欢这样。

Answer 1

您可以使用

形式的正则表达式

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

请参阅示例http://regex101.com/r/cE6yS6/3

• ^将正则表达式固定在字符串的开头。确保没有任何内容符合匹配的字符串

• [^:]+:匹配:后跟:

以外的任何内容

• [^;]+;匹配;后跟;

以外的任何内容

• +量词，重复出现property:value;

• $将正则表达式锚定在字符串的末尾。确保匹配字符串后面没有任何内容。

Answer 2

尝试这个更好的解决方案：

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

它处理异常情况：

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

表示html：

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