pattern属性を使ってみる

input要素にpattern属性を設定して、ブラウザに標準で用意されているバリデーションを試してみます。

サンプルコード

pattern属性は正規表現で指定します。
例えば半角英数字のみ入力させたい場合、以下のような指定になります。

<input type="text" name="userid" pattern="^[0-9a-zA-Z]+$" placeholder="ユーザー名(半角英数字のみ)">

これで半角英数字以外を入力した状態でフォーム送信すると、エラーが表示されるようになりました。
半角英数字のみ入力させるデモページ

ただ上記の場合、未入力の状態だと送信できてしまします。
未入力の場合は送信させたくない場合、別途required属性を指定します。

<input type="text" name="userid" pattern="^[0-9a-zA-Z]+$" required placeholder="ユーザー名(半角英数字のみ)">

必須で半角英数字のみ入力させるデモページ

pattern属性はtype属性がtext以外でも特に問題なく使用できます。
例としてpasswordで設定してみます。

<input type="password" name="password" pattern="^[0-9a-zA-Z]{8,16}" placeholder="パスワード(半角英数字8~16文字)">

type passwordの場合も特に問題なく動作しました。
type passwordの場合のデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31