Web制作にてフォームを作成する場合、特定の形式に従ったデータを受け取ることが重要となります。

意図しない形式での入力はバグの発生やセキュリティリスクにつながります。

基本的には入力された内容をバックエンドにて精査し利用していく流れになるかと思います。

より精度を上げる為、フロントエンドでも制限を行っている方は多いのではないでしょうか？

そこで今回はHTMLだけで要素の内容を正規表現で制限する方法についてご紹介致します。

属性紹介

input要素の入力内容を正規表現で制限するには「pattern」属性を使用する事で実装する事が出来ます。

「pattern」属性は「text」「tel」「email」「url」「password」「search」タイプにて利用できる入力型の属性トとなっております。

詳細な仕様につきましてはmozillaの公式サイトをご確認よろしくお願い致します。

使用方法

次に「pattern」属性の使用方法について解説致します。

「pattern」属性は下記の様にinput要素に指定できます。

<input type="text" pattern="正規表現" title="エラーメッセージ">

pattern属性に正規表現を指定し、title属性で指定外の値が入力された場合のエラーメッセージを記載します。

今回は例としてパスワード入力エリアを正規表現で制限してみます。

前提条件は以下となります。

下記コードとなります。

<input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}" title="規格外のパスワードとなります。">

いかがでしょうか？「pattern」属性を指定する事で入力エリアの内容を正規表現で制限する事が出来ました。

では実際の活用事例をご紹介します。

上記はローカル環境のみでIPアドレスの住所を検索できるサービスとなっております。

該当サービスの検索フォームでは「pattern」属性を使用し簡易的に入力条件を制限しております。

完全な規制ではございませんが上記の画像の様に明らかに間違ったパターンを入力した際はエラーとなる様に設定されております。

「pattern」属性はHTML5より導入された属性となっております。

その為、一部の古いブラウザーでは非対応となる場合がございます。

またクライアントサイドでの動作となる為、利用ユーザーにより制限を変更、削除する事が可能となっております。

その為、サーバーサイドでの検証、制限も重要となっております。

用途に合わせてご設定をよろしくお願い致します。