Директива AngularJs предлагает предложения для писем с орфографическими ошибками?

Question

Я пытаюсь уменьшить частоту отказов писем, отправленных с веб-сайта, который я создаю. После просмотра списка зарегистрированных пользователей, я заметил, что довольно часто люди орфографические ошибки домен по электронной почте, как user@gmai.com или user@gmail.con

Другие чем-то связывать MX поиск и AngularJs, какие мои варианты проверки правильности адреса электронной почты, прежде чем тратить на него отскок?

Answer 1

Я нашел Mailcheck.js on Github, который делает именно то, что я хочу, предлагая предложение типа «Возможно, вы имели в виду user@gmail.com?»

Однако библиотека предназначена для простого Javascript/jQuery. Я нуждался AngularJs обертку, так что я немного изменен angular-mailcheck здесь в результате директивы:

(function() { 
    'use strict'; 

    /** 
    * @ngdoc directive 
    * @name mailcheck.directive:mailcheck 
    * @description 
    * Angular wrapper for Mailcheck.js 
    */ 
    function mailcheckDirective($compile, $sce) { 
     return { 
      restrict: 'A', 
      replace: false, 
      link: function (scope, el, attrs) { 
       //Mailcheck.defaultDomains.push('yandex.ru', 'rambler.ru', 'bk.ru', 'ukr.net', 'list.ru', 'inbox.ru', 'yandex.ua', 'ya.ru', 'i.ua', 'inbox.lv', 'mail.ua', 'yandex.com', 'abv.bg', 'icloud.com', 'meta.ua', 'tut.by', 'rediffmail.com'); 
       Mailcheck.defaultTopLevelDomains.push('com.id', 'com.ph', 'com.br', 'com.vn', 'com.in'); 

       // Limit to input element of specific types 
       var inputTypes = /text|email/i; 
       if (el[0].nodeName !== 'INPUT') { 
        throw new Error('angular-mailcheck is limited to input elements'); 
       } 
       if (!inputTypes.test(attrs.type)) { 
        throw new Error('Invalid input type for angular-mailcheck: ' + attrs.type); 
       } 

       scope.suggestion = false; 
       scope.bugmenot = false; 

       // Compiled template 
       if (attrs.mailcheck !== "notemplate") { 
        var template = $compile('<div class="help-block mailcheck" ng-show="suggestion && !bugmenot">Did you mean <a ng-bind="suggestion" ng-click="useSuggestion()"></a>? <a ng-click="suggestion=false;bugmenot=true">Nope.</a></div>')(scope); 
        el.after(template); 
       } 

       el.bind('input', function() { 
        scope.suggestion = false; 
       }) 
       .bind('blur', function() { 
        el.mailcheck({ 
         suggested: function (element, suggestion) { 
          scope.suggestion = suggestion.full; 
          scope.$apply(); 
         }, 
         empty: function (element) { 
          scope.suggestion = false; 
         } 
        }); 
       }); 

       scope.useSuggestion = function() { 
        el.val(scope.suggestion); 
        scope.suggestion = false; 
       }; 

      } 
     }; 
    } 

    angular 
     .module('angular-mailcheck', []) 
     .directive('mailcheck', mailcheckDirective); 

    mailcheckDirective.$inject = ['$compile', '$sce']; 

})(); 

После директивы является частью решения он может быть использован, как это в HTML:

<input mailcheck="notemplate" /> 
<small class="mailcheck" ng-show="suggestion && !bugmenot"> 
    <span>Did you mean</span> <a ng-bind="suggestion" ng-click="useSuggestion()"></a>? 
    <a ng-click="suggestion=false;bugmenot=true">Nope</a>. 
</small> 

Если вам не нужно настройте блок mailcheck в HTML, вы можете использовать атрибут mailcheck="" вместо mailcheck="notemplate".