コニファ・ロゴ

csstest: HTML5 input要素のpattern属性に指定する正規表現のパターン

HTML5になって拡張されたinput要素pattern属性の正規表現による入力制限のサンプルをいくつか備忘録的にまとめました。
いずれも、指定以外の値を入れると、アラートが出て送信できません。Safariは対応していないようです。

pattern属性に指定する正規表現のサンプルとそのソース

(1)半角全角問わず5文字
 
<input type="text" name="data1" pattern=".{5}" title="半角全角問わず5文字">

(2)全角カタカナ(HTMLがutf-8の場合)
 
<input type="text" name="data2" pattern="^[ァ-ンヴー]+$ , [\u30A1-\u30FF]*" title="全角カタカナ">

(3)全角ひらがな(HTMLがutf-8の場合)
 
<input type="text" name="data3" pattern="^[ぁ-ん]+$ , [\u3041-\u309F]*" title="全角ひらがな">

(4)半角英数のみ
 
<input type="text" name="data4" pattern="^[0-9A-Za-z]+$" title="半角英数のみ">

(5)半角英数7文字
 
<input type="text" name="data5" pattern="^([a-zA-Z0-9]{7})$" title="半角英数7文字">

(6)半角英数10文字以上
 
<input type="text" name="data6" pattern="^([a-zA-Z0-9]{10,})$" title="半角英数10文字以上">

(7)メールアドレス
 
<input type="text" name="data7" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="メールアドレス">

(8)電話番号(携帯、固定・ハイフン付き)
 
<input type="text" name="data8" pattern="\d{2,4}-\d{3,4}-\d{3,4}" title="電話番号">

 

戻るボタン