html5をつかったフォームのバリデーションチェック

FRONTEND

2019.03.25

これまでjavascriptやphpをつかわないと実装できなかったフォームのバリデーションチェックですが、html5以降は特別な言語をつかわなくても簡単に実装できるようになりました。

とはいっても、多少は正規表現の知識が必要だったりするので、比較的よくつかうであろうフォーム項目の記述例をまとめて紹介します。

どれかを選択することが必須のパターン

例:性別

<input type="radio" name="gender" id="gender1" value="1" required /><label for="gender1">男性</label> <input type="radio" name="gender" id="gender2" value="2" /><label for="gender2">女性</label>

valueの値が空欄の回答を選択するとエラーになるパターン

例:都道府県

<select name="prefecture" required><option value="">選択してください</option><option value="8">茨城県</option><option value="9">栃木県</option><option value="10">群馬県</option><option value="11">埼玉県</option><option value="12">千葉県</option><option value="13">東京都</option><option value="14">神奈川県</option></select>

チェックボックスへのチェックが必須のパターン

例:利用規約に同意

<input type="checkbox" name="agreement" id="agreement" value="1" required /><label for="agreement">同意する</label>

電話番号

「数字2~3文字」+「ハイフン(あってもなくても大丈夫)」+「数字3~4文字」+「ハイフン(あってもなくても大丈夫)」+「数字3~4文字」のパターンでないとエラーになります。

<input type="text" name="tel" value="" style="ime-mode:disabled" placeholder="090-1234-5678" pattern="\d{2,4}-?\d{3,4}-?\d{3,4}" title="電話番号" required />

メールアドレス

メールアドレスの形式で入力されていないとエラーになります。

<input type="text" name="email" value="" style="ime-mode:disabled" placeholder="localname@domain.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="メールアドレス" required />

パスワード

「半角英大文字、半角英小文字、半角数字をいずれも必ず含む6文字以上でないとエラーとなる」という記述方法です。

<input type="password" name="password" value="" style="ime-mode:disabled" placeholder="Abcd1234" pattern="(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{6,}" title="半角英大文字・半角英小文字・半角数字をいずれも必ず含む6文字以上" required />

フォームのバリデーションチェックでよくつかう正規表現

次のような正規表現をよくつかうのではないでしょうか。

[a-z]+ 半角英小文字
[A-Z]+ 半角英大文字
[0-9]+ 半角数字
[0-9]{1,4} 半角数字 1文字~4文字
[0-9]{6,} 半角数字 6文字以上
[ァ-ヴー¥s ]+ カタカナ 半角スペース 全角スペース
-? ハイフン があってもなくても