htmlの入力URLのパターン不一致

Question

入力URLとパターンが最も単純なパターンとして「^ http：//」に設定されています。下のように値を使用すると、validityオブジェクトのpatternMismatchと表示されます。パターンや値に何が問題なのですか？

<input value="http://www.example.com" pattern="^http://" type="url"/>, 

Answer 1

バックスラッシュをエスケープする必要があります。また、開始と終了のアンカーは、暗黙的である：

<input value="http://www.example.com" pattern="http:\/\/.+" type="url"/> 

.+結末は少なくとも一つの文字が存在しなければならないことを意味しています。基本的に、この正規表現は、実際には：

/^http:\/\/.+$/u 

uフラグと^と$アンカーは暗黙的である：

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
• Should I use^and $ in html5 input regex pattern validation?