[HTML] INPUTタグのpattern属性の正規表現サンプル

HTML

inputタグのtype="text"でさまざまなバリデーションを実現するための、pattern属性の書き方サンプル集

デモ

数値のみ

ひらがなのみ(ー：全角ハイフン含む)

カタカナのみ(ー：全角ハイフン含む)

郵便番号（-ハイフン有無どっちも可）

電話番号（-ハイフン有無どっちも可）

メールアドレス

年月日(年-月-日)

時間(時-分-秒)

ソースコード

html

<link rel="stylesheet" href="style.css" />

<h2>数値のみ</h2>
<input type="text" pattern="\d+" placeholder="0123456789"/>

<h2>ひらがなのみ(ー：全角ハイフン含む)</h2>
<input type="text" pattern="[あ-んー]+" placeholder="あいうえお"/>

<h2>カタカナのみ(ー：全角ハイフン含む)</h2>
<input type="text" pattern="[ァ-ンヴー]+" placeholder="アイウエオ"/>

<h2>郵便番号（-ハイフン有無どっちも可）</h2>
<input type="text" pattern="\d{3}-?\d{4}" placeholder="000-0000" />

<h2>電話番号（-ハイフン有無どっちも可）</h2>
<input type="text" pattern="\d{2,4}-?\d{3,4}-?\d{3,4}" placeholder="0000-00-0000"/>

<h2>メールアドレス</h2>
<input type="text" pattern="[a-z0-9._%+\-]+@[a-z0-9\.\-]+\.[a-z]+" placeholder="user@example.com"/>

<h2>年月日(年-月-日)</h2>
<input type="text" pattern="\d{4}-\d{2}-\d{2}" placeholder="yyyy-mm-dd" />

<h2>時間(時-分-秒)</h2>
<input type="text" pattern="\d{2}:\d{2}:\d{2}" placeholder="hh-ii-ss" />

css

input{
  border:2px solid blue;
  padding:5px;
  outline:none;
}
input:invalid{
  border-color:red;
}