AngularJs指令提供拼写错误的电子邮件建议？ [英] AngularJs directive to offer suggestions for misspelled emails?

问题描述

我试图减少来自网站我建立发送的电子邮件的跳出率。望着注册用户的列表后，我注意到，经常拼错的人在电子邮件领域，比如 [e-mail] 或 [e-mail] 的

I am trying to reduce bounce rates of emails sent from the website I am building. After looking at the list of registered users I have noticed that quite often people misspell domain on email, like [e-mail] or [e-mail]

除了莫名其妙地绑MX查找和AngularJs，什么是我的验证的电子邮件地址的选项是在它浪费了反弹之前是否正确？

Other than somehow tying MX lookup and AngularJs, what are my options for verifying that email address is correct before wasting a bounce on it?

推荐答案

我发现 Mailcheck.js在Github 这不正是我想要什么样所提供的建议：你的意思的 [e-mail] 的？

I have found Mailcheck.js on Github which does exactly what I want by providing suggestion like "Did you mean [e-mail]?"

不过，库是普通的JavaScript / jQuery的。我需要AngularJs封装器，所以我稍微修改角MAILCHECK 这里得到的指令：

However, library is for plain Javascript / jQuery. I needed AngularJs wrapper so I slightly modified angular-mailcheck here is resulting directive:

(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的解决方案的一部分：

Once directive is part of solution it can be used like this in 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。

If you don't need to customize mailcheck block in HTML you can user mailcheck="" attribute instead of mailcheck="notemplate".

这篇关于AngularJs指令提供拼写错误的电子邮件建议？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！