正则表达式：允许多封电子邮件，以;分隔 （分号）并允许空白/空值

Question

Here is my regex:

var emailsRegex = /^[\W]*([\w+\-.%]+@[\w\-.]+\.[A-Za-z]{2,4}[\W]*;{1}[\W]*)*([\w+\-.%]+@[\w\-.]+\.[A-Za-z]{2,4})[\W]*$/;

Currently it allows fully qualified single emails and multiple emails separated by semicolon, example:

email1@hi.com  
email1@hi.com; email2@hi.com
email1@hi.com; email2@hi.com; email3@hi.com

...are all valid.

I want this to stay the same, but also allow blank/empty inputs. My form is flagging $invalid with a blank input field, even though the required attribute is not specified on the input field.

I suspect this is because it is not passing the regex validation. Thanks!

Answer 1

Please do not use a regex to match an email . First of all your regex is wrong (it won't match emails like foo+bar@example.org which is perfectly valid given RFC822 and newer RFCs). You should better use a library like verifyjs or fogcreek's email checker to check that email.

Then all you have to do is to split your string around each emails using email_string.split(';') and apply the checker on each of them.

HTH

Answer 2

I ended up using string.split(;) and then passing through an improved RegEx which should account for 99% of email addresses in use today. And I'm doing it inside an Angular Directive.

It allows for empty inputs, multiple emails separated by ; which comply with the RFC for majority usage of email addresses.

HTML

<input type="text" id="emailCc" name="emailCc" ng-model="vm.ccRecipient" class="form-control input-sm" multiple-emails="vm.ccRecipient" placeholder="Email Cc" />

AngularJS

angular.module('my-app')
.directive('multipleEmails', function () {
  return {
      require: 'ngModel',
      link: function (scope, element, attrs, ctrl) {
          ctrl.$parsers.unshift(function (rawInput) {

              var emails = rawInput.split(';');
              //console.log(emails);

              // Consider not using complex regex validation for emails. See: https://davidcel.is/posts/stop-validating-email-addresses-with-regex/
              // Instead, consider just checking for an "@" and a "." and call it a done. The mail daemon will return whether its a valid or invalid/bounced email address
              //var emailsRegex = /.+@.+\..+/i;

              // define single email validator here
              var regexPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

              // angular.foreach(emails, function() {
              var validityArr = emails.map(function (str) {
                  if (rawInput) {
                      return regexPattern.test(str.trim());

                  } else if (!rawInput) {
                      return true;
                  }
              }); // 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 rawInput;
              } else {
                  ctrl.$setValidity('multipleEmails', false);
                  return undefined;
              }

          });
      }
  };
});