超低機能のメールフォームバリテーション

Pocket
[`evernote` not found]

なんの釣りでもありませんが、メールアドレスのチェックだけというニッチなメールフォームのバリテーションをjQueryで作ってみたのでご紹介します。

さっそくデモを

メールアドレス欄にメール以外を入力するとエラーメッセージが表示されます。
また、その下の確認に先に入力したメール以外が入力されるとエラーが表示されます。

それだけです。

エラーもただのテキストなのでそのまま送信できちゃうという無配慮ですw

ただ、jQueryだけで書かれてるので、既存のフォームにも組み込みやすいかと思います。

簡単にロジックを説明すると、
メールフォームの値が変更になったかどうかを判定して、入力された値を取得します。
そして、その値がいわゆるメールアドレスなのか正規判定で調べて、違っていたらエラーを返します。

確認も同様にメールフォームの入力を判定して、先に入力されているアドレスと一致していなければ、エラーを返すという感じです。

//初期設定
var message = "正しいメールアドレスを入力してください";
$('input#mail').after('<div class="error">'+message+'</div>');

var messege_check = "メールアドレスが異なります";
$('input#mail_check').after('<div class="error_check">'+messege_check+'</div>');


//メールアドレスの判定
$('input#mail').change(function () {
 var mailStr = "";
 
mailStr = $(this).val();
  if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
        $('.error').show('fast');
   }else{
        $('.error').hide('fast');
   }
}).change();

//一致するか
$('input#mail_check').change(function () {
var mail_checkStr = "";
 
 mail_checkStr = $(this).val();
  if(mail_checkStr != $('input#mail').val() ){
        $('.error_check').show('fast');
   }else{
        $('.error_check').hide('fast');
   }
}).change();

html側は、メールアドレスと確認用のメールアドレスのinputにそれぞれ、#mailと#mail_checkを付けるだけです。

もう少しブラッシュアップしなければ、実務では使えないかもしれませんが、実はバリテーションは簡単な仕組みでもできるんだよというお話でした。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。