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

Posted

技术标签:

【中文标题】AngularJs 指令为拼写错误的电子邮件提供建议?【英文标题】:AngularJs directive to offer suggestions for misspelled emails? 【发布时间】:2016-03-30 13:17:33 【问题描述】:

我正在尝试降低从我正在构建的网站发送的电子邮件的跳出率。查看注册用户列表后,我注意到人们经常在电子邮件中拼错域名,例如 user@gmai.comuser@gmail.con

除了以某种方式绑定 MX 查找和 AngularJs 之外,我还有哪些选择可以在浪费退回邮件之前验证电子邮件地址是否正确?

【问题讨论】:

【参考方案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>

如果您不需要在 HTML 中自定义 mailcheck 块,您可以使用 mailcheck="" 属性而不是 mailcheck="notemplate"

【讨论】:

非常感谢您! PS 如果有人需要 React 版本,有一个可用的 npmjs.com/package/react-mailcheck

以上是关于AngularJs 指令为拼写错误的电子邮件提供建议?的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS:如何在为缺少的属性提供默认值时避免非分配错误?

AngularJS – 如何在 Jasmine 中为输入事件指令编写单元测试

如何修复 AngularJS 指令中的“jQuery 可拖动不是函数”

在 Access 中创建 Outlook 收件箱电子邮件表

angularJS

angularJS