solo - regex angular 4

Cómo validar la identificación del correo electrónico en angularJs usando ng-pattern (9)

A continuación se muestra el patrón totalmente calificado para la validación de correo electrónico.

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

Estoy tratando de validar un campo de id. De correo electrónico en angularJs usando la directiva ng-pattern.

Pero soy nuevo en AngularJs. Necesito mostrar un mensaje de error tan pronto como el usuario ingrese la identificación de correo electrónico incorrecta.

El código que tengo a continuación estoy tratando de resolver. Ayúdeme con el uso de ng-pattern para obtener el resultado correcto.

<script type="text/javascript" src="/Login/script/ang.js"></script> <script type="text/javascript"> function Ctrl($scope) { $scope.text = ''enter email''; $scope.word = /^[a-z]+[a-z0-9._]+@[a-z]+/.[a-z.]{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>

Ahora, Angular 4 tiene un validador de correo electrónico incorporado https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

Simplemente agregue un correo electrónico a la etiqueta. Por ejemplo

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

Controlador angularjs, solo un ejemplo para buscar uno o más correos electrónicos en el cuerpo de un mensaje.

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

De acuerdo con la respuesta de @scx, creé una validación para GUI

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

Y simplemente agrega:

css

.warning{ border:1px solid red; }

html

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

Esta es la Validación de jQuery Email utilizando Regex Expression. también puedes usar el mismo concepto para AngularJS si tienes idea de AngularJS.

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

Source

Hay un buen ejemplo de cómo lidiar con este tipo de problema modyfing validadores angulardocs . Solo he agregado un patrón de validación más estricto.

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

Y simplemente agrega

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

Intenté el método de @Joanna y probé en los siguientes sitios web y no funcionó.

Luego lo modifiqué y funcionó.

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

Puedes usar ng-messages

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

incluir el módulo

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

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

Si desea validar el correo electrónico, utilice input con type = "email" en lugar de type = "text". AngularJS tiene validación de correo electrónico de fábrica, por lo que no es necesario utilizar ng-pattern para esto.

Aquí está el ejemplo de la documentación original:

Para obtener más detalles, lea este documento: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

Ejemplo en vivo: http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

UPD:

Si no está satisfecho con el validador de correo electrónico incorporado y desea usar su validación de patrón RegExp personalizada, entonces se puede aplicar la directiva ng-pattern y de acuerdo con la documentation el mensaje de error se puede mostrar así:

El validador establece la clave de error de patrón si el ngModel. $ ViewValue no coincide con un RegExp

Plunker: https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview