it-swarm.com.de

So überprüfen Sie die E-Mail-ID in angleJs mithilfe von ng-pattern

Ich versuche, ein E-Mail-ID-Feld in "angleJs" mithilfe der ng-pattern-Direktive zu überprüfen.

Aber ich bin neu bei AngularJs. Ich muss eine Fehlermeldung anzeigen, sobald der Benutzer die falsche E-Mail-ID eingibt.

Der Code, den ich unten habe, versucht zu lösen. Helfen Sie mir mit ng-pattern, um das richtige Ergebnis zu erhalten.

<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._][email protected][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>
54
anon

Wenn Sie eine E-Mail bestätigen möchten, verwenden Sie die Eingabe mit type = "email" anstelle von type = "text". AngularJS hat die E-Mail-Validierung bereits im Auslieferungszustand, daher müssen Sie dafür kein ng-pattern verwenden.

Hier ist das Beispiel aus der Originaldokumentation:

<script>
function Ctrl($scope) {
  $scope.text = '[email protected]';
}
</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>

Weitere Informationen finden Sie in diesem Dokument: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

Live-Beispiel: http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

UPD:

Wenn Sie mit dem integrierten E-Mail-Validator nicht zufrieden sind und Ihre benutzerdefinierte RegExp-Mustervalidierung verwenden möchten, können Sie die Anweisung ng-pattern anwenden und gemäß der Dokumentation die Fehlermeldung folgendermaßen anzeigen:

Der Prüfer legt den Musterfehlerschlüssel fest, wenn ngModel. $ ViewValue passt nicht zu einem RegExp

<script>
function Ctrl($scope) {
  $scope.text = '[email protected]';
  $scope.emailFormat = /^[a-z]+[a-z0-9._][email protected][a-z]+\.[a-z.]{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

56
SunnyMagadan

Es gibt ein schönes Beispiel, wie mit dieser Art von Problemen umzugehen ist, die eingebaute Validatoren angle docs ändern. Ich habe nur strengere Validierungsmuster hinzugefügt.

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

Und einfach hinzufügen

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

Gemäß der Antwort von @scx habe ich eine Validierung für die GUI erstellt

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

Und einfach hinzufügen:

css

.warning{
   border:1px solid red;
 }

html

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

Dies ist die jQuery-E-Mail-Überprüfung mit Regex Expression. Sie können dasselbe Konzept auch für AngularJS verwenden, wenn Sie eine Vorstellung von AngularJS haben.

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

Quelle .

6
Ehtesham Shami

Sie können ng-messages verwenden 

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

schließen Sie das Modul ein

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

in 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>
3
arun-r

Nachfolgend finden Sie das vollständig qualifizierte Muster für die E-Mail-Überprüfung.

<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>
3
Sanjeev Sinha

Jetzt hat Angular 4 eine integrierte E-Mail-Überprüfung https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 - https://github.com/angular/angular/pull/13709

Fügen Sie einfach E-Mail zum Tag hinzu. Zum Beispiel

  <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>
2
so-random-dude

Nehmen Sie sich etwas Zeit, damit es für mich funktioniert.

Anforderung: 

einzelne oder durch Kommas getrennte Liste von E-Mails mit Domänen mit dem [email protected] oder [email protected]

Regler: 

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

<ng-form name="emailModal">
    <div class="form-group row mb-3">
        <label for="to" class="col-sm-2 text-right col-form-label">
            <span class="form-required">*</span>
            To
        </label>
        <div class="col-sm-9">
            <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>
        </div>
    </div>
</ng-form>

Ich habe ein gutes Online-Regex-Test-Tool gefunden.

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

0
Dmitri Algazin

Ich habe versucht, mit der folgenden Regex funktioniert es gut.

E-Mail-Bestätigung: \ w + ([- +. ']\W +) @\w + ([-.]\W +).\W + ([-.]\W +) *

0
subhashis

Ich habe @ Joannas Methode ausprobiert und auf den folgenden Websites getestet, und es hat nicht funktioniert.

  1. https://regex101.com/
  2. https://www.regextester.com/
  3. https://regexr.com/

Ich habe es dann geändert und es hat funktioniert.

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

anglejs Controller Way, nur ein Beispiel für die Suche nach einer oder mehreren E-Mails im Nachrichtentext.

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

Verwenden Sie den regulären Ausdruck

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

Es erlaubt

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
0
Ankur Raiyani