HTMLのpattern属性を使ってフォームのバリデーションチェックを行う方法

<input>タグ内では、pattern属性に正規表現を指定することで、フォームのバリデーションチェック（入力チェック）ができます。

pattern属性の使い方

使い方はpattern属性内に正規表現を入力するだけです。
例えば、下記の場合は半角英数のみ許可します。

<input type="text" pattern="^[0-9A-Za-z]+$">

仮に正規表現に合致しない全角文字を入力して送信しようとすると、「指定されている形式で入力してください。」と表示されて送信が止まります。

正規表現のパターン

いくつか使えそうな正規表現のパターンをまとめておきます。

使用する上での注意点

別途チェックする場所は必要

JavaScriptを使うことなく入力チェックができるので非常に便利ですが、ユーザーが開発者ツールを開いて、設定しているpattern属性を削除すると、普通に送信できてしまいます。

そのため、このpattern属性だけ設定してそれだけで安心というわけにはいきません。

送信先のサーバーなど、別途チェックする場所は必要になります。

input type=”number”では使えないので注意

<input type="number">を使う場合はpattern属性は使えません。
そもそも<input type="number">は数値を入力するための項目なので、自動的に数値しか入力できなくなります。

min属性とmax属性で最小値と最大値の設定をしたり、step属性でステップ数の設定はできますが、これらの設定は横の上下ボタンのみにしか影響しなくて、小数や負の数は直接キーボードで入力しようとすると、入力できてしまいます。

もし特定の自然数しか許可したくない場合は、pattern属性が使えないので、JavaScriptを使って確認する必要があります。