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

查看 source (version 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;
  }
});

另请参阅此 short demo 。

Answer 2

这是一种快速而肮脏的方式来满足您的需求。在您的HTML中：

<textarea ng-change="validateEmails()" ng-model="user.email" ng-class="user.validation.email.isValid ? 'valid' : 'invalid'">
<div class="errorPanel" ng-show="!user.validation.email.isValid">{{ validation.email.message }}</div>

或者，您可以使用ng-blur代替ng-changes，这样textarea就不会变得无效＆＃39;当用户输入电子邮件时。不过，我会把它留给你。为textarea.valid，textarea.invalid，div.errorPanel添加一些CSS样式。

在你的控制器中：

user.validation = {};
user.validation.email = {
  message: '',
  isValid: true
};

$scope.validateEmails = function() {
  var emails = $scope.user.email.split(',');

  var isValid = true;
  for (var i = 0; isValid && i < emails.length; i++) {
    if (!validateEmail(emails[i])) {
      isValid = false;
      user.validation.email.isValid = false;
      user.validation.email.message = 'Email ' + emails[i] + ' does not appear to be a proper email';
    }
  }

}

function validateEmail() {
  // use whatever email validation function you want
}

希望有所帮助！

表单验证 - 多封电子邮件

2 个答案: