メールアドレスの入力間違いを減らす mailcheck.js

ALL
Linuxサーバプログラミング
スポンサーリンク

フォームでメールアドレスを入力してもらっても、そのアドレスに入力間違いがあった場合、メールを送ることが出来ません。
メールアドレスの入力時にチェックできれば、入力ミスを防ぐことが出来ます。

そのようなチェックを行える、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月末時点） – 株式会社 ＭＭ総研

コメント