【バリデーション】URL｜フォームの入力形式チェックを実装する方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
ウェブアプリケーションやウェブサイトを開発する際、ユーザーからの入力を処理することは一般的なタスクとなります。特に、URLを受け付けるフィールドでは、その形式や正確さが非常に重要となります。不正確なURLがシステムに取り込まれると、想定外のエラーや問題を引き起こす可能性があるため、この記事ではJavaScriptとjQueryを使用して、入力されたURLのバリデーションチェック方法をご紹介します。
URLの形式チェック
まず初めに、HTMLのコードを用意します。今回の入力形式チェックに使用するHTMLは全て以下の通りです。
HTML
<form id="myForm">
<input type="text" id="myInput" required>
<button type="submit">送信</button>
</form>
<div id="errorMessage" style="color: red;"></div>
JavaScript、jQueryそれぞれの実装方法を解説していきます。URLの入力形式チェックは半角英数字のみを想定しています。
JavaScriptで実装する方法
URL（https・http）の入力形式チェックをJavaScriptで実装する方法は以下になります。
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
var input = document.getElementById('myInput').value;
// URL（https・http）の正規表現
var regex = new RegExp('^(https?:\\/\\/)?'+
'(([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}'+
'(\\/[-a-z\\d%_.~+]*)*', 'i');
if (regex.test(input)) {
document.getElementById('errorMessage').textContent = '';
this.submit();
} else {
document.getElementById('errorMessage').textContent = '有効なURLを入力してください。';
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
①まず、HTMLからmyFormというIDを持つフォーム要素をdocument.getElementById('myForm')で取得して、このフォームにsubmitイベントのリスナーを追加します。このリスナーは、フォームが送信されるたびに指定した関数を実行します。
②フォームの送信が試みられると、先ほど追加したイベントリスナーによって関数が起動します。関数の最初の行、event.preventDefault();で、通常のフォーム送信を一時停止します。これにより、次の処理が終わるまでページのリロードや移動が避けられます。
③次に、myInputというIDを持つ入力フィールドからユーザーの入力を取得します。この取得したデータは変数inputに保存され、後の処理で使用されることとなります。
④ユーザー入力の形式を確認するために、URLの正規表現を定義します。この正規表現は、一般的なhttpまたはhttpsを含むURLのパターンに一致するように設計されています。
⑤そして、正規表現を用いてユーザー入力の形式を検証します。regex.test(input)により、入力されたURLが正規表現に適合しているかを確認します。
jQueryで実装する方法
URL （https・http） の入力形式チェックをJavaScriptで実装する方法は以下になります。
$('#myForm').on('submit', function(event) {
event.preventDefault();
var input = $('#myInput').val();
// URL（https・http）の正規表現
var regex = new RegExp('^(https?:\\/\\/)?'+
'(([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}'+
'(\\/[-a-z\\d%_.~+]*)*', 'i');
if (regex.test(input)) {
$('#errorMessage').text('');
this.submit();
} else {
$('#errorMessage').text('有効なURLを入力してください。');
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
①こちらはjQueryを使用して同じ動作を実現しています。$('#myForm')でmyFormというIDを持ったフォーム要素を選択し、submitイベントのリスナーを追加しています。
②フォームの送信がトリガーされると、上記のリスナーによって関数が再び実行されます。そして、先ほどと同様に、event.preventDefault();でデフォルトの送信を一時的に阻止します。
③jQueryの方法を使用して、ユーザーの入力を再び取得します。この場合、$('#myInput').val()を用いて、myInputというIDの入力フィールドからのデータを取得し、変数inputに保存します。
④先ほど定義したURLの正規表現を再利用して、ユーザーの入力を検証します。
⑤最後に、ユーザーの入力が正規表現に適合しているかどうかを基に、エラーメッセージを表示するか、正常にフォームを送信するかの処理を行います。
その他のパターン
正規表現は非常に強力なツールであり、わずかな書き換えによって様々な文字列のパターンをチェックすることができます。具体的には、以下のコード部分が核心となります。
// URL（https・http）の正規表現
var regex = new RegExp('^(https?:\\/\\/)?'+
'(([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}'+
'(\\/[-a-z\\d%_.~+]*)*', 'i');
この正規表現は以下のようなURLも検証をすることが出来ます。
- http://example.com
- https://sub.example.co.jp
- https://example.com/subdir
- https://example.com/subdir/subdir2
この正規表現は現在、URLの形式チェックに対応していますが、範囲やパターンを調整することで、異なる条件のチェックにも応用することが可能です。JavaScript・jQueryを利用する際、この部分の正規表現を適切にカスタマイズすることで、幅広い文字列形式の検証に対応することが出来ます。
URL（https・http）
var regex = new RegExp('^(https?:\\/\\/)?'+
'(([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}'+
'(\\/[-a-z\\d%_.~+]*)*', 'i');
URL（https）
var regexHttpsOnly = new RegExp('^https:\\/\\/'+
'(([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}'+
'(\\/[-a-z\\d%_.~+]*)*', 'i');
URL（http）
var regexHttpOnly = new RegExp('^http:\\/\\/'+
'(([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}'+
'(\\/[-a-z\\d%_.~+]*)*', 'i');
その他のバリデーションチェック
フォームを構築する際、バリデーションチェックするその他プログラムコードについては、別の記事で詳しく取り上げています。詳細はそちらを参照してみてください。
まとめ
URLのバリデーションは、ユーザー提供のデータの質を確保するための重要なステップです。この記事を通じて、JavaScriptとjQueryを使用した簡単かつ効果的なバリデーション方法を学ぶことができました。正確なURLのみを受け入れることで、システムの安定性を保つとともに、ユーザーに安心してサービスを利用してもらうための土台を築くことができます。
