Html 表单验证-多封电子邮件

嗨，我有一个表格，上面有一个文本区域，可以存放多个电子邮件地址。我如何在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>

电子邮件

这里有一个快速而肮脏的方法来做你需要的事情。在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>

{{validation.email.message}

或者，您可以使用ng模糊来代替ng更改，这样当用户键入电子邮件时，文本区域不会变得“无效”。不过，我还是让你来决定吧。为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
}

user.validation={}；
user.validation.email={
消息：“”，
有效：对
};
$scope.validateEmails=函数（）{
var emails=$scope.user.email.split（'，'）；
var isValid=true；
对于（var i=0；isValid&&i

---

希望有帮助

查看，很容易找到单个电子邮件的验证方式：

// 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;
  }
});

---

---

另请参见，这显然不是“角度方法”，但要注意：FomrController将自动添加必要的类，因此您无需手动执行（例如，ng无效、ng有效、ng有效必需等）。谢谢，这很有效。希望这是添加到角核心很快。仅供参考JShint将投诉

multipleEmailsValidator

函数上的Semicool（取决于设置的严格程度）@Duncan:Thx！固定的