关于正则表达式：如何使用ng-pattern在angularJs中验证电子邮件ID

How to validate email id in angularJs using ng-pattern

我正在尝试使用ng-pattern指令验证angularJs中的Email id字段。

但是对AngularJs来说是新手。用户输入错误的电子邮件ID后，我需要立即显示错误消息。

我下面的代码正在尝试解决。帮助我使用ng-pattern获得正确的结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相关讨论

如果要验证电子邮件，请使用type =" email"而不是type =" text"的输入。 AngularJS具有开箱即用的电子邮件验证功能，因此无需使用ng-pattern。

这是原始文档中的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function Ctrl($scope) {
$scope.text = '[email protected]';
}

<form name="myForm" ng-controller="Ctrl">
Email: <input type="email" name="input" ng-model="text" required>
<br/>
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.email">
Not valid email!</span>

<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>

有关更多详细信息，请阅读以下文档：https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

实时示例：http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

UPD：

如果您对内置的电子邮件验证程序不满意，并且想要使用自定义RegExp模式验证，则可以应用ng-pattern指令，并且根据文档，错误消息可以显示如下：

The validator sets the pattern error key if the ngModel.$viewValue
does not match a RegExp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function Ctrl($scope) {
$scope.text = '[email protected]';
$scope.emailFormat = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}

<form name="myForm" ng-controller="Ctrl">
Email: <input type="email" name="input" ng-model="text" ng-pattern="emailFormat" required>
<br/><br/>
<span class="error" ng-show="myForm.input.$error.required">
Required!
</span><br/>
<span class="error" ng-show="myForm.input.$error.pattern">
Not valid email!
</span>

<tt>text = {{text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.pattern = {{!!myForm.$error.pattern}}</tt><br/>
</form>

Plunker：https：//plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ？p = preview

相关讨论

有一个很好的示例，介绍了如何处理此类内置验证器angulardocs的问题。我只添加了更严格的验证模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

app.directive('validateEmail', function() {
var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;

return {
require: 'ngModel',
restrict: '',
link: function(scope, elm, attrs, ctrl) {
// only apply the validator if ngModel is present and Angular has added the email validator
if (ctrl && ctrl.$validators.email) {

// this will overwrite the default Angular email validator
ctrl.$validators.email = function(modelValue) {
return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
};
}
}
};
});

只需添加

1	<input type='email' validate-email name='email' id='email' ng-model='email' required>

相关讨论

根据@scx的答案，我为GUI创建了一个验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

app.directive('validateEmail', function() {
var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
return {
link: function(scope, elm) {
elm.on("keyup",function(){
var isMatchRegex = EMAIL_REGEXP.test(elm.val());
if( isMatchRegex&& elm.hasClass('warning') || elm.val() == ''){
elm.removeClass('warning');
}else if(isMatchRegex == false && !elm.hasClass('warning')){
elm.addClass('warning');
}
});
}
}
});

只需添加：

的CSS

1
2
3

.warning{
border:1px solid red;
}

html

1	<input type='email' validate-email name='email' id='email' ng-model='email' required>

这是使用正则表达式的jQuery电子邮件验证。如果您对AngularJS有想法，也可以对AngularJS使用相同的概念。

1	var expression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

资源。

相关讨论

以下是电子邮件验证的完全限定模式。

1
2
3

<input type="text" pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]*\.([a-z]{2,4})$/" ng-model="emailid" name="emailid"/>

Please enter valid email address

相关讨论

您可以使用ng-messages

1	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js">

包括模块

1	angular.module("blank",['ngMessages']

在HTML

1
2
3
4

<input type="email" name="email" class="form-control" placeholder="email" ng-model="email" required>

This field is required
Your email address is invalid

相关讨论

现在，Angular 4内置了电子邮件验证程序
https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6
https://github.com/angular/angular/pull/13709

只需将电子邮件添加到标签即可。例如

1
2
3
4
5
6
7

<form #f="ngForm">
<input type="email" ngModel name="email" required email>
<button [disabled]="!f.valid">Submit</button>
<p>
Form State: {{f.valid?'VALID':'INVALID'}}
</p>
</form>

在正则表达式下使用

1	^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+)+((\.)[a-z]{2,})+$

它允许

1
2
3
4
5

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

花一些时间让它对我有用。

需求：

域名以[email protected]或[email protected]结尾的单个或逗号分隔的电子邮件列表

控制器：

1
2
3
4

$scope.email = {
EMAIL_FORMAT: /^\w+([\.-]?\w+)*@(list.)?gmail.com+((\s*)+,(\s*)+\w+([\.-]?\w+)*@(list.)?gmail.com)*$/,
EMAIL_FORMAT_HELP:"format as '[email protected]' or comma separated '[email protected], [email protected]'"
};

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ng-form name="emailModal">

<label for="to" class="col-sm-2 text-right col-form-label">
<span class="form-required">*</span>
To
</label>

<input class="form-control" id="to"
name="To"
ng-required="true"
ng-pattern="email.EMAIL_FORMAT"
placeholder="{{email.EMAIL_FORMAT_HELP}}"
ng-model="mail.to"/>
<small class="text-muted" ng-show="emailModal.To.$error.pattern">wrong</small>

</ng-form>

我找到了很好的在线正则表达式测试工具。
用测试覆盖了我的正则表达式：

https://regex101.com/r/Dg2iAZ/6/tests

我已经尝试过下面的正则表达式，它工作正常。

电子邮件验证： w +([-+。'] w +)@ w +([-。] w +)。 w +([-。] w +)*

我尝试了@Joanna的方法，并在以下网站上进行了测试，但无法正常工作。

https://regex101.com/

https://www.regextester.com/

https://regexr.com/

然后，我将其修改为并成功运行。

1	/([\w-]+(?:\.[\w-]+))@((?:[\w-]+\.)\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+

angularjs控制器方式，这只是在消息正文中查找一个或多个电子邮件的示例。

1
2
3
4
5

sp = $scope.messagebody; // email message body

if (sp != null && sp.match(/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+/)) {
console.log('Error. You are not allowed to have an email in the message body');
}