☰

HTML5 URL入力検証では、URLがhttp://で始まるものと想定します。質問する

tag-icon • tag-icon html string validation model-validation
HTML5 URL入力検証では、URLがhttp://で始まるものと想定します。質問する

HTML5 は自動 URL 検証を提供します:-

<form>
   <input type="url" name="someUrl">
</form>

これにより、プロトコル プレフィックスを持たない URL の検証が失敗します。たとえば、stackoverflow.comは失敗しますが、http://stackoverflow.comは合格します。

プロトコルがまだ存在しない場合に、URL に http:// を自動的に追加するにはどうすればよいですか?

onblur イベント ハンドラーを追加することもできますが、検証前のイベントなど、より良い方法はありますか?

ベストアンサー1

このコードはユーザーの操作を中断するのではなく、ユーザーがフォーム フィールドを離れるまで待機して、入力テキストに「http」が含まれているかどうかを確認します。したがって、「onkeyup」ではなく「onblur」を使用します。

次に、indexOf を使用して文字列に「http」が含まれているかどうかを確認します。含まれていない場合は、-1 が返され、これは falsey です。

function checkURL (abc) {
  var string = abc.value;
  if (!~string.indexOf("http")) {
    string = "http://" + string;
  }
  abc.value = string;
  return abc
}
<form>
  <input type="url" name="someUrl" onblur="checkURL(this)" />
  <input type="text"/>
</form>

フィドル

おすすめ記事