パソコン鳥のブログ

アクセスカウンタ

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

<<   作成日時 : 2014/07/24 22:17   >>

トラックバック 0 / コメント 0

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

そのようなチェックを行える、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("<b><i>" + suggestion.full + "</b></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 = "<b><i>" + suggestion.full + "</i></b>ではないでしょうか?";
  },
  empty: function() {
     document.getElementById("suggestion").innerHTML = "";
  }
});

});
</script>
</body>




なお、修正した mailcheck.js は、当然ですが、本家 mailcheck のライセンスに従って、MITライセンス です。


参考


ユーザーに届かない登録確認メールを半減させるプラグイン「mailcheck.js」 - GIGAZINE

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

携帯電話・PHS各社のドメイン一覧 | お知らせ | NTTドコモ

ブロードバンド回線事業者の加入件数調査(2014年3月末時点) - 株式会社 MM総研

テーマ

関連テーマ 一覧


月別リンク

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
メールアドレスの入力間違いを減らす mailcheck.js パソコン鳥のブログ/BIGLOBEウェブリブログ
文字サイズ:       閉じる