如何使用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}$/;
来源 。
