ywork2020.com

Title

パターン属性を使えば、入力可能な値のパターンを正規表現を使って指定する事が出来る

pattern属性の概要

input要素のpattern属性は、正規表現を使った入力規制を指定する属性です。
pattern="属性値"にバリデーション用の正規表現を設定して利用します。

バリデーションとは

バリデーションとは、検証・実証・認可・妥当性の意味を持った語句です。

実機サンプル

送信データ入力欄受信データ受付欄
送信 郵便番号:

正規表現の指定:
pattern="\d{3}-\d{4}"
受信 郵便番号:
送信 電話番号:

正規表現の指定:
pattern="\d{2,4}-\d{3,4}-\d{3,4}"
受信 電話番号:
送信 メールアドレス:

正規表現の指定:
pattern="^[a-zA-Z0-9!$&*.=^`|~#%'+\/?_{}-]+@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4}$"
受信 メールアドレス:

各入力欄の指定パターンにマッチしない状態で送信ボタンを押すとエラーになり、送信できません。

サンプルコード

<body>
	<form action="送信ページURL" method="GET">
		送信 郵便番号:<br>
		<input type="text" pattern="\d{3}-\d{4}" title="郵便番号は、「123-4567」のように、「3桁の数字 & ハイフン(‐) & 4桁の数字」のパターンで入力して下さい。"><br>
	
		送信 電話番号:<br>
		<input type="text" pattern="\d{2,4}-\d{3,4}-\d{3,4}" title="電話番号は、「12-1234-5678」・「123-456-7890」・「1234-56-7890」・「1234-567-890」の何れかのパターンで入力して下さい。"><br>

		送信 メールアドレス:<br>
		<input type="text" pattern="^[a-zA-Z0-9!$&*.=^`|~#%'+\/?_{}-]+@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4}$" title="emailを入力して下さい。"><br>
	</form>
</body>

pattern属性の補足

pattern属性を使用する場合は、title属性で入力パターンの説明を入れておくことが推奨されています。
説明は、エラーメッセージ、ツールチップ、ステータスバーなどに表示される場合があります。

関連のあるページ