表单验证 - 多封电子邮件

Question

嗨,我有一个带有文本区域的表单,其中包含多个电子邮件地址.我如何在AngularJS中验证这一点,现在它说当有多个电子邮件时它无效.电子邮件将以逗号分隔.

<form name="testForm" ng-submit="submit()" novalidate>
     <textarea type="email" multiple rows="3" name="emailInput" placeholder="Email Addresses" ng-model="user.email" required></textarea>    
     <button type="submit" ng-disabled="testForm.$invalid">Email</button>
</form>

Answer 1

看一下源代码(版本1.2.16),很容易找到如何进行单个电子邮件的验证:

// This is the regular expression used to validate the value
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i;

// A helper function to call $setValidity and return the value / undefined,
// a pattern that is repeated a lot in the input validation logic.
function validate(ctrl, validatorName, validity, value){
  ctrl.$setValidity(validatorName, validity);
  return validity ? value : undefined;
}

// Excerpt from the `input[type="email"]` directive
var emailValidator = function(value) {
  return validate(ctrl, 'email', ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value), value);
};

ctrl.$formatters.push(emailValidator);
ctrl.$parsers.push(emailValidator);

因此,您可以制作自己的指令,以类似方式验证多个逗号海量电子邮件:

app.directive('multipleEmails', function () {
  // Constants
  var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/i;

  // DDO
  return {
    restrict: 'A',
    require: 'ngModel',
    link: multipleEmailsPostLink
  };

  // Function Definitions
  function isValidEmail(email) {
    return EMAIL_REGEXP.test(email.trim());
  }

  function multipleEmailsPostLink(scope, elem, attrs, modelCtrl) {
    modelCtrl.$formatters.push(multipleEmailsValidator);
    modelCtrl.$parsers.push(multipleEmailsValidator);

    // Helpers
    function multipleEmailsValidator(value) {
      return validateAll(modelCtrl, 'multipleEmails', value);
    }
  }

  function validateAll(ctrl, validatorName, value) {
    var validity = ctrl.$isEmpty(value) || value.split(',').every(isValidEmail);

    ctrl.$setValidity(validatorName, validity);

    return validity ? value : undefined;
  }
});

另见这个简短的演示.