验证单个字段中的多个电子邮件地址
是否有方法验证单个输入字段中的一个或多个电子邮件地址？验证单个字段中的多个电子邮件地址
我目前正在探索的方式是创建一个自定义指令，在检测到逗号时将输入拆分为不同的电子邮件。这是我到目前为止：
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.
});
}
};
});
我与此有关的问题是，我一直无法手动调用角电子邮件验证程序。
编辑：plunkr
编辑2：原来，我可以用角1.3
您可以使用ngPattern
<input ng-model="mymodel.attribute" required ng-pattern="someRegex">
其中someRegex被设置为一个逗号分隔的电子邮件地址模式。
AngularJS input.js有EMAIL_REGEXP，您可以重新使用它来重建模式。这与input[email]验证相同。
或东西沿着这些线路
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 = /\[email protected]\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;
}
// })
});
}
};
});
谢谢，这真是太好了。如果您还想要允许空输入，请执行以下操作：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]' – TetraDev 2016-03-09 21:13:30
不是依靠角度验证的，我刚刚结束了使用不同的正则表达式。这是我结束了，这是非常相似，这里显示的：
angular.module('myApp')
.directive('multipleEmails', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
var emailsRegex = /^[\W]*([\w+\-.%][email protected][\w\-.]+\.[A-Za-z]{2,4}[\W]*,{1}[\W]*)*([\w+\-.%][email protected][\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;
}
});
}
};
});
这是非常简单的。注意你的输入类型，而在使用该指令应该是电子邮件。
//的Html
<input name="emailTextbox" type="email" email-validator
ng-model="vm.emailAdd"/>
//指令
(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;
};
}
}
}
})();
我知道这是一个迟到的回答，但使用角1.x的逻辑尽可能只有添加了多个支持。其他答案都使用自己的验证正则表达式。
<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'函数总是返回'true'。考虑'every（）'而不是'forEach（）'？ – 2017-06-12 22:32:51
angular.module('app1', [])
.controller('appCont', formData)
.directive('emailValidator', emailValidator);
function formData($scope) { $scope.emails = '[email protected], [email protected]';}
function emailValidator() {
var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
function multiEmailValidationInTextBox(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(modelValue) {
var isEmailsValid = true
, isLastEmailValid = false;;
if (angular.isDefined(modelValue)) {
if (!ctrl.$isEmpty(modelValue)) {
var splitEmails = modelValue.split(',')
, emailLength = splitEmails.length;
if (emailLength < 1) {
isValidEmails = EMAIL_REGEXP.test(splitEmails[0].trim());
} else {
angular.forEach(splitEmails, function(item, index) {
if (!EMAIL_REGEXP.test(splitEmails[index].trim()) && index != emailLength-1) {
isValidEmails = false;
}
});
var lastEmail = splitEmails[emailLength-1].trim();
if (ctrl.$isEmpty(lastEmail) ||
(!ctrl.$isEmpty(lastEmail) && EMAIL_REGEXP.test(lastEmail))) {
isLastEmailValid = true;
}
}
}
}
if (isEmailsValid && isLastEmailValid) {
elm.removeClass('has-error');
elm.addClass('has-success');
} else {
elm.addClass('has-error');
elm.removeClass('has-success');
}
return isEmailsValid;
});
}
return {
require: 'ngModel',
restrict: 'A',
link: multiEmailValidationInTextBox
};
}.has-error { background-color: red; }
.has-success { background-color: #afdcaf; }
input[type="text"] {
width: 500px;
font-family: sans-serif, monospace;
font-size: 25px;
border: 1px solid grey;
border-radius: 4px;
height: 30px;
padding: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app1" ng-controller="appCont"> <div>
<input name="emailTextbox" type="text" email-validator ng-model="emails"/></div>
</body>
'Ctrl键。$ parsers'是一个数组，帮助自己！但这听起来像一个糟糕的用户界面。 – Blackhole 2014-12-01 17:19:58
@Blackhole你能给我一个这样的例子吗？我希望UI可以改变，但我认为这是不可能的：（ – alexdmejias 2014-12-01 17:24:20
你可以拆分空格而不是逗号，删除逗号，然后检查有效性并设置有效性 – SoluableNonagon 2014-12-01 17:31:33