Javascript AngularJs指令为拼写错误的电子邮件提供建议？

我正在努力降低从我正在建设的网站发送的电子邮件的反弹率。在查看注册用户列表后，我注意到人们经常在电子邮件中拼错域名，比如user@gmai.com或user@gmail.con

除了以某种方式将MX查找和AngularJs捆绑在一起之外，我还有什么方法可以在浪费时间之前验证电子邮件地址是否正确？

我发现，通过提供类似“你是什么意思”的建议，哪些方法正是我想要的user@gmail.com"

然而，该库是用于普通Javascript/jQuery的。我需要AngularJs包装器，所以我稍微修改了一下这里的结果指令：

(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'];

})();

（函数（）{
"严格使用",；
/**
*@ngdoc指令
*@name mailcheck.directive:mailcheck
*@说明
*Mailcheck.js的角度包装器
*/
函数mailcheckDirective（$compile，$sce）{
返回{
限制：“A”，
替换：false，
链接：功能（范围、el、属性）{
//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 icloud'，'meta ua tut.by'，'rediffmail.com'）；
Mailcheck.defaultTopLevelDomains.push（'com.id'，'com.ph'，'com.br'，'com.vn'，'com.in'）；
//限制特定类型的输入元素
var inputTypes=/text | email/i；
if（el[0].nodeName！=“输入”）{
抛出新错误（“angular-mailcheck仅限于输入元素”）；
}
如果（！inputTypes.test（属性类型））{
抛出新错误（“角度邮件检查的输入类型无效：”+attrs.type）；
}
scope.suggestion=false；
scope.bugmenot=false；
//编译模板
如果（attrs.mailcheck！=“notemplate”）{
var template=$compile（'你的意思是？不'）（范围）；
el.之后（模板）；
}
el.bind（'input'，function（）{
scope.suggestion=false；
})
.bind（'blur'，函数（）{
邮件支票({
建议：功能（要素、建议）{
scope.suggestion=suggestion.full；
作用域：$apply（）；
},
空：函数（元素）{
scope.suggestion=false；
}
});
});
scope.useSuggestion=函数（）{
el.val（范围建议）；
scope.suggestion=false；
};
}
};
}
有棱角的
.module（'angular-mailcheck'，[]）
.指令（“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>

你是说？
不。

---

如果您不需要在HTML中自定义mailcheck块，您可以使用

mailcheck=“

属性，而不是

mailcheck=“notemplate”

非常感谢！PS如果任何人需要react版本，则有一个可用