【HTML】pattern属性を使って入力を正規表現でチェックする方法

このページについて

このページではHTMLで使う事ができるpatternの機能と使い方を解説しています。

patternはinputタグでのみ使う事ができます。ただinputなら何にでも使えるのかというとそうではなく、type属性がtext/tel/email/url/password/searchの場合にのみ使う事ができます。

ここで扱う正規表現というワードですが、これはJavaScriptでも他のプログラミング言語でも同じような意味合いですが、「入力や文字列に対してチェックして指定した型に一致するかを検査する」的なことをします。

携帯電話の番号は大抵が3-4-4という構成になっていると思います。これをあらかじめ正規表現で形式を指定しておく事で、ユーザーの入力ミスを減らす事ができます。

pattern属性を使う時にはサーバーに行く前にチェックが行われますが、ユーザーからみたら何も変化はありません。そのためtitle属性を付与し、その入力エリアに対しての説明を付与するとユーザーからはわかりやすいと思います。

title属性だけではなく、その入力エリア周辺に入力内容を説明するテキストを配置するのも必要です。

pattern属性は対応している型を持つinputタグで使う事ができます。今回は電話番号を示すtelで書いていきます。

日本の携帯電話の番号は3-4-4で構成されているので、それをチェックするための条件を書きます。今回はサンプルなのでtitle属性などの他の要素は省略します。実際に書く場合、必要に応じて付け加えましょう。

<input type="tel" pattern="[0-9]{3}">
<input type="tel" pattern="[0-9]{4}">
<input type="tel" pattern="[0-9]{4}">

patternの中身に書かれている[0-9]{3}について簡単に解説します。これが正規表現の書き方になるんですが、この場合は「0から9の数字を使う。文字数は3文字」という書き方になります。{4}であれば4文字という指定になります。

patternはinputタグの一部のtype属性に対して使う事ができます。正規表現について理解していれば色々と応用ができるものの、最初のうちはとても難しく感じてしまう部分ともなります。まずは正規表現から少しずつ覚えていくのが良いかもしれませんが、どちらを優先するかは好みの問題だったりします。