フォームでメールアドレスを入力してもらっても、そのアドレスに入力間違いがあった場合、メールを送ることが出来ません。
メールアドレスの入力時にチェックできれば、入力ミスを防ぐことが出来ます。
そのようなチェックを行える、mailcheck という JavascriptライブラリとjQueryプラグインがあります。
mailcheck/README.md at master · mailcheck/mailcheck · GitHub
これを使うと、フォームでの入力時に下記のように、正しいと思われるメールアドレスを提示することができます。
ところが、この mailcheck 、日本のメールアドレスに使われる、xxx.yyy.ne.jp とか xxx.yyy.co.jp などには対応していません。
そこで、日本のメールアドレスに使われる形式にも対応するように、mailcheck のコード mailcheck.js を修正しました。
ここ からダウンロードして下さい。
下記のように、日本のメールアドレスに使われる形式でも機能するようになります。
使い方は、本家の mailcheck と同じです。
使用時は、下記の緑色の箇所のように、domains と haveSubDomains を定義して下さい。
下記で記述のプロバイダのメールドメインで、シェアで70%程度のプロバイダをカバーしています。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="mailcheck.js"></script>
<title>Mailcheck</title>
</head>
<body>
<h1>Mailcheck</h1>
<input id="email" name="email" type="email" />
<input name="Submit" type="submit" />
<p id="suggestion"></p>
<script>
var domains = ["gmail.com",'yahoo.co.jp', 'ybb.ne.jp','nifty.com',"docomo.ne.jp","mopera.net","softbank.ne.jp","disney.ne.jp","i.softbank.jp","ezweb.ne.jp","augps.ezweb.ne.jp","emnet.ne.jp","emobile.ne.jp","emobile-s.ne.jp","pdx.ne.jp","willcom.com","wcm.ne.jp","hotmail.com","hotmail.co.jp","outlook.jp","outlook.com","live.com"];
var haveSubDomains = ["ocn.ne.jp","biglobe.ne.jp","so-net.ne.jp","plala.or.jp","eonet.ne.jp","auone-net.jp","nifty.com","vodafone.ne.jp","biz.ezweb.ne.jp","ido.ne.jp","pdx.ne.jp","ne.jp","co.jp","ac.jp","or.jp","com"];
$('#email').on('blur', function(event) {
// console.log("event ", event);
// console.log("this ", $(this));
$(this).mailcheck({
domains: domains, // optional
topLevelDomains: haveSubDomains, // optional
suggested: function(element, suggestion) {
// callback code
// console.log("suggestion ", suggestion.full);
$('#suggestion').html("<i>" + suggestion.full + "</i>ではないでしょうか");
},
empty: function(element) {
// callback code
$('#suggestion').html('No Suggestions :(');
}
});
});
</script>
</body>
jQueryを使用しない場合も、下記のように mailcheck. を利用できます。
<html>
<head>
<script src="mailcheck.js"></script>
<title>Mailcheck</title>
</head>
<body>
<h1>Mailcheck</h1>
<input id="email" name="email" type="email" />
<input name="Submit" type="submit" />
<p id="suggestion"></p>
<script>
var domains = ["gmail.com",'yahoo.co.jp', 'ybb.ne.jp','nifty.com',"docomo.ne.jp","mopera.net","softbank.ne.jp","disney.ne.jp","i.softbank.jp","ezweb.ne.jp","augps.ezweb.ne.jp","emnet.ne.jp","emobile.ne.jp","emobile-s.ne.jp","pdx.ne.jp","willcom.com","wcm.ne.jp","hotmail.com","hotmail.co.jp","outlook.jp","outlook.com","live.com"];
var haveSubDomains = ["ocn.ne.jp","biglobe.ne.jp","so-net.ne.jp","plala.or.jp","eonet.ne.jp","auone-net.jp","nifty.com","vodafone.ne.jp","biz.ezweb.ne.jp","ido.ne.jp","pdx.ne.jp","ne.jp","co.jp","ac.jp","or.jp","com"];
document.getElementById("email").addEventListener('blur', function(event) {
Kicksend.mailcheck.run({
email: document.getElementById("email").value,
domains: domains, // optional
topLevelDomains: haveSubDomains, // optional
distanceFunction: null, // optional
suggested: function(suggestion) {
// callback code
document.getElementById("suggestion").innerHTML = "<i>" + suggestion.full + "</i>ではないでしょうか？";
},
empty: function() {
document.getElementById("suggestion").innerHTML = "";
}
});
});
</script>
</body>
なお、修正した mailcheck.js は、当然ですが、本家 mailcheck のライセンスに従って、MITライセンス です。
参考
ユーザーに届かない登録確認メールを半減させるプラグイン「mailcheck.js」 – GIGAZINE
メールアドレスが微妙に違っていたら「これですか？」って教えてくれるjQueryプラグイン「mailcheck.js」｜skuare.net
携帯電話・PHS各社のドメイン一覧 | お知らせ | NTTドコモ
ブロードバンド回線事業者の加入件数調査（2014年3月末時点） – 株式会社 ＭＭ総研
コメント