jQuery email checkプラグインを使用して、emailドメイン名のスペルミスチェック機能を備えた超クールなダイナミックメッセージ版システムを開発します.

日付:2012-4-26出所:GBin 1.com
オンラインデモローカルダウンロード
多くのウェブサイトやwebアプリケーションでは、Eメールアドレスを記入する必要がありますが、この過程で、ユーザーは誤ったEメールドメイン名をスペルすることがよくあります.今日は、ユーザーが入力したEメールドメイン名のスペルミスを検証するのに有効なドメイン名スペルチェックプラグインを紹介します.ここでは、このプラグインを使用して、以前のチュートリアルの例を強化します.jQueryプラグインを使用して、完全な検証機能を開発する超クールなダイナミックメッセージ版システムを開発します.他のプラグインの使用を理解していない場合は、まずその文章を読んでください.
Eメールドメイン名スペルjQuery検証プラグイン
このプラグインでは、認証が必要なEメールドメイン名を構成する必要があります.たとえば、次のようにします.
[email protected]
ユーザーが入力した場合[email protected]では、このプラグインはユーザーが入力したemailが[email protected].
プラグインのダウンロード:GitHub Repository
プラグインのデモ:demo
このプラグインはどのように使用しますか?
クラスライブラリのインポート:

<script type="text/javascript" src="js/jquery.mailcheck.js"></script> 

主な方法:

$('#mail').on('blur', function() {
  $(this).mailcheck({
    suggested: function(element, suggestion) {
     /*              */
    },
    empty: function(element) {
      /*                */
    }
  }); 

以上のコードでは、id=mailの要素がblurメソッドをトリガーされた後、email検証プラグインがユーザ入力のようなドメイン名を見つけた場合、callbackメソッドsuggestedを呼び出し、そうでなければemptyメソッドを呼び出す.
Eメールドメイン名スペル検証機能の追加
今日私たちが開発したこのオンラインプレゼンテーションでは、以上のプラグインと私たちのvalidationプラグインを統合して使用する必要があります.ユーザードメイン名をプロンプトする必要がある場合は、validationプラグインのポップアップ情報ボックスを使用して「ウォーンが推奨する電子メールアドレス」を表示します.
Javascript

$('#mail').on('blur', function() {
  $(this).mailcheck({
    suggested: function(element, suggestion) {
      $('#suglist').validationEngine('showPrompt', 'Or it should be <b>' + suggestion.full + '</b> ?' , 'load',  'centerRight', true);
      $('#suglist').html('<a id="yes" href="#">Yes</a>&nbsp;&nbsp;<a id="no"  href="#">No</a>');
      sugmail = suggestion.full;
    },
    empty: function(element) {
      /* do nothing */
    }
});

上記のコードは簡単です.推奨ドメイン名がある場合はvalidationEngineのshowpromptメソッドを呼び出し、ポップアップボックスを表示します.次に、推奨ドメイン名を使用するかどうかをユーザーに選択させます.推奨が見つからない場合は、何も実行しません.
次に、ポップアップyesとnoボタンのバインド方法を示します.

$('#yes').live('click', function(e){
        $("#mail").val(sugmail);
        $('#suglist').html('');
        $('#commentform').validationEngine('hideAll');
        e.preventDefault();
});

$('#no').live('click', function(){
        $('#suglist').html('');
        $('#commentform').validationEngine('hideAll');
        e.preventDefault();
});        

ユーザーがyesを選択した場合、ユーザーが入力したemailアドレスの代わりに、私たちが推奨するメールアドレスを使用します.
HTMLコード

<div class="msg-wrapper">
    <span id="suglist">email check</span>
</div>    

ポップアップボックスバインドの要素を追加します.
CSSコードと以前のコードはほぼ変わらない.
オンラインプレゼンテーションを実行して効果を確認できます.
出典:jQuery email checkプラグインを使用して、emailドメイン名のスペルミスチェック機能を備えた超クールなダイナミックメッセージ版システムを開発