メールアドレス入力時にドメイン名typo(っぽいもの)を検出&サジェストする

  • 18
    Like
  • 3
    Comment
More than 1 year has passed since last update.

Kicksend/mailcheck を使うと,メールアドレスのtypoとしてありがちな *@gmali.com*@gmail.coといったtypoを検出し,サジェストすることが簡単にできる.

簡単な利用方法

メールアドレス以外も入力する場合はREADMEの例のようにblur時に実行すればよい.

応用

ユーザーにメールアドレスのみ入力してもらう,もしくはアドレスを最後に入力してもらう場合は,blurを挟まずに登録ボタンを押すことになるためblur時のサジェストでは遅すぎる.
そのため以下のようにkeyup時かつサジェストすべきと思われるタイミング(メールアドレスのドメインのTLD入力中)で実行すると良い.

acceptableTLD = Kicksend.mailcheck.defaultTopLevelDomains.concat ['co.jp', 'ne.jp'] # co.jp, ne.jpはデフォルトでは含まれないので入れておく
$noticeBox = $('.js-email-invalid-message') # サジェストを表示するタグのクラスを指定
$('#email').on 'keyup', (ev) ->
    # ユーザーがTLDを入力し始めたと思われるタイミング以降のみサジェストする
    # e.g. foo@example.c| (|: カーソル)
    return unless /@([^.]+\.)+.+$/.test(ev.target.value)
    $(@).mailcheck
      topLevelDomains: acceptableTLD
      suggested: (element, suggestion) ->
        suggestion_html = "Did you mean: #{suggestion.address}@<b>#{suggestion.domain}</b>?"
        $noticeBox.fadeIn(200).html suggestion_html
      empty: -> $noticeBox.slideUp(200).html ''