使用正則表達式驗證文本輸入字段的內聯樣式？

Question

我有一個簡單的文本字段，需要使用正則表達式進行驗證。
文本字段應包含“正確”格式xxx：xxx;的內聯樣式。

例如：font-size：15像素； 背景：＃33333； -webkit-transition：背景色500ms緩和1s；

那里的任何正則表達式專家都可以幫助我。 我最終將自己找到解決方案，但這可能需要一段時間。

語言將是用於客戶端驗證的javascript，然后轉移到用於服務器端驗證的php。

謝謝一群人...我想到了-/（[az-] +：[0-9a-z＃（）。-] +; $）/ g-。 我會回答自己，但不確定是否是最佳解決方案。

我將從@ nu11p01n73R接受以下最詳細的答案，因為我從他的使上述工作正確的解釋中竊取了$符號。

現在我的想法有問題嗎？ 知道我在技術上不應該問這個問題，但是無論如何，我認為它更易於閱讀。 我很喜歡

Answer 1

您可以使用以下形式的正則表達式

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

參見例如http://regex101.com/r/cE6yS6/3

• ^將正則表達式錨定在字符串的開頭。 確保沒有任何東西先於匹配的字符串

• [^:]+:匹配除:之后的:

• [^;]+; 匹配以外的任何東西; 其次;

• +量詞，重復出現property:value;

• $將正則表達式錨定在字符串的末尾。 確保在matchs字符串后沒有任何內容。

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;"/>