メールアドレスが微妙に違っていたら「これですか?」って教えてくれるjQueryプラグイン「mailcheck.js」

メールアドレスが微妙に違うので、ログインできない。
これって離脱率が上がる要因ですよね。
jQueryプラグインのKicksend/mailcheckを利用すると、「もしかしたら・・・これじゃない?」ってのをリコメンドしてくれちゃいます。

sponsors

使用方法

下記みたいなフォームがあったとします。

<input id="email" name="email" type="text" />
Kicksend/mailcheckからファイルをダウンロード。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.mailcheck.js"></script>
<script>
var domains = ['hotmail.com', 'gmail.com', 'aol.com' ,"skuare.net"]; 
//自分で好きなドメインを指定できます。
//デフォルトはUS系がメインなので環境にあわせて指定しましょう。
$('#email').on('blur', function() {
  $(this).mailcheck({
    domains: domains, 
   	//ここからドメインが間違っていた時の処理
    suggested: function(element, suggestion) {
    	$("#sug").text(suggestion.full);
    	//idがsugにこれじゃない?ってのを表示します。
    	$("#sug").click(function(){
    		//sugをクリックした時にinput内の記述を変更します。
    		$("#email").attr("value",suggestion.full);
    		$(this).hide();
    	});
    },
  });
});
</script>
あとはid、sugを好きなとこに記述します。

<p id="sug"></p>

サンプル

もしかしたら・・・ですか?


Javascriptサンプルページ一覧
skuare.net

sponsors