Überprüfen Sie mehrere E-Mail Adressen im single-Bereich

Gibt es eine Möglichkeit zu überprüfen eine oder mehrere E-Mail Adressen in einem einzigen Eingabefeld?

Dem Weg, ich bin derzeit erforschen, ist das erstellen einer benutzerdefinierten Richtlinie teilt den input in verschiedenen E-Mails, wenn ein Komma erkannt wird. Dies ist, was ich habe, so weit:

angular.module('myApp')
  .directive('multipleEmails', function () {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {

          var emails = viewValue.split(',');
          //loop that checks every email, returns undefined if one of them fails.
        });
      }
    };
  });

Das Problem, das ich damit habe ist, dass ich nicht in der Lage waren zu nennen, die eckige E-Mail-validator manuell.

Edit: plunkr

Edit 2: Stellt sich heraus, dass ich verwenden können, angular 1.3

ctrl.$parsers ist ein array, hilf dir selbst! Aber das hört sich definitiv wie eine schlechte UI.
können Sie mir ein Beispiel, wie das funktionieren würde? Ich Wünsche der ui ändern könnte, aber ich denke, das ist aus der Frage 🙁
man könnte split auf Leerzeichen anstelle von Kommata, Kommas entfernen, dann überprüfen Sie die Gültigkeit und legen Sie die Gültigkeit
In meiner Erfahrung, ein input-Feld mit getrennte E-Mail-Adressen ist durchaus üblich, in einem UI (z.B. Outlook) und server-side-code. Die Adressen werden entweder getrennt durch Kommas oder Semikolons.
nicht sicher, wie Sie diese testen können, die Gültigkeit von E-Mails

InformationsquelleAutor alexdmejias | 2014-12-01

  1. 14

    http://plnkr.co/edit/YrtXOphxkczi6cwFjvUp?p=preview

    .directive('multipleEmails', function () {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {

        var emails = viewValue.split(',');
        //loop that checks every email, returns undefined if one of them fails.
        var re = /\S+@\S+\.\S+/;

        //angular.foreach(emails, function() {
          var validityArr = emails.map(function(str){
              return re.test(str.trim());
          }); //sample return is [true, true, true, false, false, false]
          console.log(emails, validityArr); 
          var atLeastOneInvalid = false;
          angular.forEach(validityArr, function(value) {
            if(value === false)
              atLeastOneInvalid = true; 
          }); 
          if(!atLeastOneInvalid) { 
            //^ all I need is to call the angular email checker here, I think.
            ctrl.$setValidity('multipleEmails', true);
            return viewValue;
          } else {
            ctrl.$setValidity('multipleEmails', false);
            return undefined;
          }
        //})
      });
    }
  };
});
    Vielen Dank, das ist großartig. Wenn Sie wollen auch die leere Eingänge: var validityArr = emails.map(function (str) { if (viewValue) { return regexPattern.test(str.trim()); } else if (!viewValue) { return true; } }); // sample return is [true, true, true, false, false, false]
    Zur Unterstützung der "display-name <[email protected]>" ich stattdessen verwenden Sie diese regex test: var re = /^(?:([\w\s]+)\s*<(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}>|(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6})$/;

    InformationsquelleAutor SoluableNonagon

  2. 3

    Anstatt sich auf die Winkel-validator, ich landete mit einem anderen regex. Dies ist, was ich am Ende mit, die ist sehr ähnlich zu dem, was hier gezeigt :

    angular.module('myApp')
  .directive('multipleEmails', function () {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl ) {
        var emailsRegex = /^[\W]*([\w+\-.%]+@[\w\-.]+\.[A-Za-z]{2,4}[\W]*,{1}[\W]*)*([\w+\-.%]+@[\w\-.]+\.[A-Za-z]{2,4})[\W]*$/;
        ctrl.$parsers.unshift(function(viewValue) {
          if (emailsRegex.test(viewValue)) {
            ctrl.$setValidity('multipleEmails', true);
            return viewValue;
          } else {
            ctrl.$setValidity('multipleEmails', false);
            return undefined;
          }
        });
      }
    };
  });

    InformationsquelleAutor alexdmejias

  3. 2

    Können Sie ngPattern 

    <input ng-model="mymodel.attribute" required ng-pattern="someRegex">

    wo someRegex festgelegt ist, um eine durch Kommata getrennte E-Mail-Adresse Muster.

    AngularJS input.js hat EMAIL_REGEXP, die Sie wiederverwenden können, für die Rekonstruktion der Muster. Dies ist die gleiche wie input[email] Validierung.

    oder etwas entlang dieser Linien

    Angularjs dynamische ng-Muster-Validierung

    InformationsquelleAutor bhantol

  4. 2

    Dies ist sehr einfach.. Hinweis: Ihre Eingaben werden sollte-E-Mail, während die Verwendung dieser Direktive.

    //Html - 

     <input name="emailTextbox" type="email" email-validator 
 ng-model="vm.emailAdd"/>

    //Richtlinie

      (function() {
      'use strict';

      angular
      .module('myApp')
      .directive('emailValidator', emailValidator);

      emailValidator.$inject = ['_'];
      /* @ngInject */
      function emailValidator(_) {
        var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;

        var directive = {
          require: 'ngModel',
          restrict: 'A',
          link: linkFunc
        };

        return directive;

        function linkFunc(scope, elm, attrs, ctrl) {

          if (ctrl && ctrl.$validators.email) {
            ctrl.$validators.email = function(modelValue) {
              if (angular.isDefined(modelValue)) {
                var isValidEmails = ctrl.$isEmpty(modelValue) || modelValue.split(',').every(
                  function (email) {
                    return EMAIL_REGEXP.test(email.trim());
                  }
                );
              }             
              return isValidEmails;
            };
          }
        }
      }

    })();
    Dies wird nicht validieren mehr TLDs, wie .Reisen, .museum etc.
    Okay @Episodex... Versuchen, diese regex anstelle der vorherigen... var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,20})$/;
    Wie doe ich auf das Ergebnis in der parent-controller?

    InformationsquelleAutor Surjeet Bhadauriya

  5. 0

    Ich weiß, es ist eine späte Antwort, aber verwendet den Winkel-1.x Logik, so viel wie möglich und fügt nur die Vielfache Unterstützung. Andere Antworten, die alle Ihre eigenen validation regex.

    <input type="email" data-ng-multiple-email data-ng-model="$ctrl.x">

angular.module("myApp")
    .directive("ngMultipleEmail", function () {
        return {
            restrict: "A",
            require: "?ngModel",
            link: function (scope, elm, attrs, ctrl) {
                if (ctrl && ctrl.$validators.email) {
                    let originalValidator = ctrl.$validators.email;
                    ctrl.$validators.email = function (modelValue,   viewValue) {
                        var value = modelValue || viewValue || "",
                            valueSplit = value.split(/[,;]+/);
                        valueSplit.forEach(function (email) {
                            var valid = originalValidator(email.trim());
                            if (!valid) {
                                return false;
                            }
                        });
                        return true;
                    };
                }
            }
        };
    });
    ctrl.$validators.email Funktion gibt immer true. Betrachten every() statt forEach()?

    InformationsquelleAutor Niels Steenbeek

Schreibe einen Kommentar