html5ならメールフォームのバリデーションなんかも秒で解決

javascriptを使ってフォーム内チェックしてた方も多いと思いますが、html5だと実は簡単にバリデーションを実装できます。

正規表現の知識が必要ですが、コピペで簡単につけれるパターン記述例を紹介します。

記述例

フリガナ

カタカナ 半角スペース 全角スペース 以外の文字が入力された場合にエラー。

<input type="text" name="kana" value=""  placeholder="フリガナ" pattern="[ァ-ヴー\s　]+" title="カタカナ" required>

郵便番号

数字3文字＋ハイフン（あってもなくても）＋数字4文字のパターンでない場合にエラー。

「?」を取るとハイフン必須になる。

<input type="text" name="zipcode" value="" style="ime-mode:disabled" placeholder="123-4567" pattern="\d{3}-?\d{4}" title="郵便番号" required>

電話番号

数字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="example@example.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>

ラジオボタン

選択されてない場合にエラー。

<input type="radio" name="plan" id="planA" value="1" required>
<label for="planA">選択A</label>
<input type="radio" name="plan" id="planB" value="2">
<label for="planB">選択B</label>

セレクトボックス

value値が空欄のものを選択した場合エラー。

<select name="prefecture" required>
<option value="">選択してください</option>
<option value="1">選択A</option>
<option value="2">選択B</option>
<option value="3">選択C</option>
</select>

チェックボックス

チェックされてない場合にエラー。

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

よく使う正規表現

以上、html5の簡単にバリデーションが実装できる方法でした。

現場から以上です！