如何使用ng-pattern在angularJs中validation电子邮件ID

我正尝试使用ng-pattern指令来validationangularJs中的电子邮件ID字段。

但是AngularJs是新的。 当用户input错误的电子邮件ID时,我需要显示一条错误消息。

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

<script type="text/javascript" src="/Login/script/ang.js"></script> <script type="text/javascript"> function Ctrl($scope) { $scope.text = 'enter email'; $scope.word = /^[az]+[a-z0-9._]+@[az]+\.[az.]{2,5}$/; } </script> </head> <body> <form name="myform" ng-controller="Ctrl"> <input type="text" ng-pattern="word" name="email"> <span class="error" ng-show="myform.email.$error.pattern"> invalid email! </span> <input type="submit" value="submit"> </form> </body> 

如果要validation电子邮件,请使用type =“email”而不是type =“text”的input。 AngularJS具有开箱即用的电子邮件validationfunction,因此不需要使用ng-pattern。

以下是原始文档的示例:

 <script> function Ctrl($scope) { $scope.text = 'me@example.com'; } </script> <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> <br> <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:

如果您对内置电子邮件validation器不满意,并且想要使用自定义RegExp模式validation,则可以应用ng-pattern指令,并根据文档显示错误消息,如下所示:

如果ngModel。$ viewValue与RegExp不匹配,validation器将设置模式错误键

 <script> function Ctrl($scope) { $scope.text = 'me@example.com'; $scope.emailFormat = /^[az]+[a-z0-9._]+@[az]+\.[az.]{2,5}$/; } </script> <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> <br><br> <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

有一个很好的例子,如何处理这种内置validation器angulardocs的问题 。 我只添加了更严格的validation模式。

 app.directive('validateEmail', function() { var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[az]{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); }; } } }; }); 

只需添加

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

根据@scx的答案,我创build了一个GUIvalidation

 app.directive('validateEmail', function() { var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[az]{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

 .warning{ border:1px solid red; } 

HTML

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

你可以使用ng消息

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

包括模块

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

在HTML中

 <input type="email" name="email" class="form-control" placeholder="email" ng-model="email" required> <div ng-messages="myForm.email.$error"> <div ng-message="required">This field is required</div> <div ng-message="email">Your email address is invalid</div> </div> 

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

 <input type="text" pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]*\.([az]{2,4})$/" ng-model="emailid" name="emailid"/> <div ng-message="pattern">Please enter valid email address</div> 

现在,Angular 4拥有内置的电子邮件validation器https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

只需添加电子邮件标签。 例如

  <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> 

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

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

这是使用正则expression式的jQuery电子邮件validation。 如果您对AngularJS有所了解,也可以使用AngularJS的相同概念。

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

来源 。