正則表達式不能用作HTML5模式驗證器

Question

我正在嘗試驗證URL是否以.png結尾：

/.[a-zA-z]\.(png)$/i

但是，當將它用作pattern屬性的值時，它似乎不起作用，但是這里的一切似乎都很好（regex101.com） 。

 <form action="#"> <input type="url" pattern="/.[a-zA-z]\\.(png)$/i" value="" required > <input type="submit" value="submit"/> </form> 

用於驗證的測試字符串：

http://imgur.com/foo.png

我想匹配o.png或最后一個正斜杠之后的所有內容，並以.png結尾

Answer 1

您不必將正則表達式放在正斜杠之間。

現在，您的正則表達式匹配：

• 任何性格.
• 大寫或小寫字符[a-zA-Z]
• 點\\.
• 捕獲組中的點png (\\.png)

因此，這將匹配2個字符和.png的url。

您可以使用^.+\\.png \\.png$匹配任何字符一次或多次.+ ，然后在\\.png$行的末尾匹配點png。

您可以擴展.+以匹配您的條件。

 <form action="#"> <input type="text" pattern="^.+\\.png$" value="" required > <input type="submit" value="submit"/> </form> 

Answer 2

從文檔 ：

圖案

檢查控件值的正則表達式。 模式必須與整個值匹配，而不僅僅是某些子集。 使用title屬性描述模式以幫助用戶。 當type屬性的值為text，search，tel，url，email或password時，此屬性適用。否則，它將被忽略。 正則表達式語言與JavaScript RegExp算法相同，帶有'u'參數，該參數使它將模式視為unicode代碼點的序列。 圖案不被正斜杠包圍。

 <form action="#"> <input type="text" pattern=".[a-zA-z]\\.(png)$" value="" required > <input type="submit" value="submit"/> </form>