HTML5からinput要素にpattern属性を使って、正規表現か否かを検証すること（バリデーション）ができるようになりました。
これにより、メールアドレス形式か否か、電話番号形式か否かなどをjavascriptなしで判別してくれて大変便利なのですが、その正規表現の記述方法は結構複雑で、毎回そのパターンをつくるのは手間がかかります。
ということで、今回は、よく使う正規表現をまとめてみました。
pattern属性の記述方法
|
1 |
<input type="text" name="sample" pattern="^[0-9]+$"> |
input 要素に配置できます。pattern 属性には値として正規表現を記述します。
それでは早速よく使う正規表現のパターンをご紹介します。
電話番号
|
1 |
<input type="text" name="sample" pattern="\d{2,4}-?\d{2,4}-?\d{3,4}"> |
数字(2～4)文字 ハイフン(-)省略可 数字(2～4)文字 ハイフン(-)省略可 数字(3～4)文字 の形式を検証します。「-?」でハイフンの省略を可能にしてます。
ハイフンを必須にする場合は次のように表現します。
|
1 |
<input type="text" name="sample" pattern="\d{2,4}-\d{2,4}-\d{3,4}"> |
郵便番号
|
1 |
<input type="text" name="sample" pattern="\d{3}-?\d{4}"> |
数字(3)文字 ハイフン(-)省略可 数字(4)文字 の形式を検証します。「-?」でハイフンの省略を可能にしてます。
※?を消すとハイフンの記述が必須になります。
全角カタカナ、全角ひらがな
お名前（漢字）のフリガナなどの入力を求める項目をつけることはよくあると思います。
ここでは、名字と名前の間にスペース（空白）を入れることにも配慮したパターンを紹介します。
全角カタカナ
|
1 |
<input type="text" name="sample" pattern="(?=.*?[\u30A1-\u30FC])[\u30A1-\u30FC\s]*"> |
カタカナ 半角、全角の空白 ー の形式を検証します。
※「\s」が空白文字を表します
※「(?=.*?[\u30A1-\u30FC])」でカタカナ文字の入力を必須にすることにより、空白のみでの入力を許可しないようにしています。
※カタカナの場合は音を伸ばす「ー」も文字に含まれるようにしています。
全角ひらがな
|
1 |
<input type="text" name="sample" pattern="(?=.*?[\u3041-\u309F])[\u3041-\u309F\s]*" > |
ひらがな 空白（半角スペース、全角スペース）
の形式を検証します。
※「\s」が空白文字を表します
※「(?=.*?[\u3041-\u309F])」でカタカナ文字の入力を必須にすることにより、空白のみでの入力を許可しないようにしています。
※ひらがなは音を伸ばす「ー」を許可していません。
パスワード
|
1 |
<input type="text" name="sample" pattern="(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{8,}"> |
英半角子文字、英半角大文字、半角数字を必ず含み、8文字以上の形式を検証します。
|
1 2 3 4 5 |
<!-- 英半角子文字、半角数字を必ず含み、8文字以上の場合 --> <input type="text" name="sample" pattern="(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,}"> <!-- 英半角大文字もしくは小文字と半角数字を必ず含み、8文字以上の場合 --> <input type="text" name="sample" pattern="(?=.*?[a-zA-Z])(?=.*?\d)[a-zA-Z\d]{8,}"> |
※文字数制限についてはコチラを確認してみてください。
空白文字のみでの入力を除外
必須の「input type=”text”」で空白（半角スペース、全角スペース）のみ入力して送信できてしまうと困りますよね？
ユーザーとしても未入力を気付かず送信してしまっていたら困るでしょう。
これはそういった問題の対策方法です。
|
1 |
<input type="text" name="sample" pattern=".*\S+.*" required> |
空白（半角スペース、全角スペース）のみ入力を禁止します。文中の空白（半角スペース、全角スペース）は許可。
その他
| メールアドレス※1 | [a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$ |
|---|---|
| URL※1 | https?://[\w/:%#\$&\?\(\)~\.=\+\-]+ |
| 文字数制限【８文字以上】※2 | .{8,} |
| 文字数制限【８文字以内】※2 | .{1,8} |
| 半角英数字 | ^[0-9A-Za-z]+$ |
| 半角英字 | ^[a-z]+$ |
| 半角数字 | ^[0-9]+$ |
※1「メールアドレス」や「URL」は「<input type=”email”>」や「<input type=”url”>」を指定するとバリデーションもしてくれるので、あえてpattern 属性を使う必要はないと思います。
※2「8」を置き換えることで制限する文字数を変更できます。
まとめ
ホームからのメール送信などでpattern属性だけでの対応ではセキュリティ面などには対応しきれないので、システム内でもう一度チェックすることはもちろん必要なのだが、記入漏れなどページ遷移なしでチェックできるという点でユーザビリティーにもすぐれている上、最新のブラウザーならほぼ対応しており、導入も気軽にできるので最低限設定しておきたいところだと思います。
