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

2020/05/09 22:22

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>

 

 

よく使う正規表現

 

[a-z]+ 半角英小文字

[A-Z]+ 半角英大文字

[0-9]+ 半角数字

[0-9]{1,4} 半角数字 1文字~4文字

[0-9]{6,} 半角数字 6文字以上

[ァ-ヴー¥s ]+ カタカナ 半角スペース 全角スペース

-? ハイフン があってもなくても

 

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

現場から以上です!

1142

PICK UP