2016年07月04日

HTML5 の input 要素の pattern 属性を利用して入力チェック

HTML5 では、type 属性に utl や tel や email や number を指定できますが、正規表現で指定したほうが微妙な調整が可能です。

以下は、数字のみ入力可能なフィールドですが、正規表現で自由に入力内容を制限可能です。但し、数字入力に関して言えば、type="number" を使用時に利用できる min 属性や max 属性があるので、そちらを利用するほうがいいでしょう( Chrome と Firefox では、jQuery UI の spinner と同様なコントロールがフィールドの右側に現れます。

▼ 実際の実行

<form action="http://winofsql.jp/php_get.php"
	target="my_ferame"
	accept-charset="utf-8">
	<input type="text"
		name="userid"
		pattern="[0-9]+"
		value="A">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_ferame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>
Google Chrome



Firefox



IE11


( IE11 はメッセージが変です )


関連する記事

JavaScript : 正規表現を使った、一般的な入力文字列の検査



posted by at 2016-07-04 23:41 | HTML | このブログの読者になる | 更新情報をチェックする