使用jQuery email check插件開發帶有email域名拼寫錯誤校驗功能的超酷動态留言版系統

日期：2012-4-26 來源：GBin1.com

線上示範本地下載下傳

很多的網站或者web應用都需要你填寫電子郵件位址，而這個過程中，使用者往往會拼寫錯誤的電子郵件域名，今天我們将給大家介紹一款很不錯的域名拼寫校驗插件，幫助你有效的幫助校驗使用者輸入的電子郵件域名拼寫錯誤，這裡我們将使用這個插件強化我們以前一篇教程中的例子 - 使用jQuery插件開發一個完整驗證功能的超酷動态留言版系統，如果你不了解其它相關的插件使用，請首先閱讀那篇文章。

電子郵件域名拼寫jQuery驗證插件

這個插件要求你配置你需要驗證的電子郵件域名，比如：

[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方法。

添加電子郵件域名拼寫驗證功能

在今天我們開發的這個線上示範中，我們需要把以上插件和我們的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方法，展示一個彈出框。然後讓使用者選擇是否使用我們推薦的域名。如果沒有找到相關推薦，則什麼操作都不執行。

...

來源：使用jQuery email check插件開發帶有email域名拼寫錯誤校驗功能的超酷動态留言版系統