HTML5のPatternタグのサンプル一覧

HTML5の<input>要素のpattern属性を指定をすると、正規表現を使うことにより入力制限を自由に設定することが出来ます。

入力制限をすることにより様々な用途で使うことが出来ます。
例えば

• 数値のみ入力させたい
• 日付を決められたフォーマットで入力させたい。
• カタカナのみ入力させたい
• 電話番号をxxx-xxxx-xxxxで入力させたい

ここでは、実際に私が使ったHTML5のpatternのサンプルを記載したいと思います。

日付パターン

yyyy-MM-dd hh:mm:ss

<input type="text" pattern="([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9]) (0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}">

例)2013-02-22 13:22:11

数値パターン

正の数値

<input type="text" pattern="[1-9][0-9]*">

例)12
     02とかはダメ

文字パターン

全角カタカナ(半角スペースと全角スペースは許容)

<input type="text" pattern="[ァ-ン|　| ]+$">

例) アイウエオ　カキクケコ
名前入力のルビーなどで使用出来る。

パスワードパターン

半角英数で最低6文字以上

^([a-zA-Z0-9]{6,})$

最低6文字以上の最低①文字の数字・英字含む

(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{6,})$

HTML5のパターンの数多いサンプルがhttp://html5pattern.com/で記載されてあるので、ここを見るとだいたいの事が解るかもしれません。

参考文献

• http://gimite.net/help/devas-ja/all_regex.html