Edited at

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

More than 5 years have 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 ''