Comment valider un email id dans angularJs en utilisant ng-pattern
J'essaie de valider un champ Email id dans angularJs en utilisant la directive ng-pattern.
Mais je suis nouveau à AngularJs. Je dois afficher un message d'erreur dès que l'utilisateur entre le mauvais identifiant de messagerie.
Le code que j'ai ci-dessous est en train de résoudre. Aidez-moi à utiliser ng-pattern pour obtenir le résultat voulu.
<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>
Si vous souhaitez valider un email, utilisez l'entrée avec type = "email" au lieu de type = "text". AngularJS a la validation de courrier électronique prête à l'emploi, donc pas besoin d'utiliser ng-pattern pour cela.
Voici l'exemple de la documentation d'origine:
<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>
Pour plus de détails, lisez ce document: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
Exemple en direct: http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info
UPD:
Si vous n'êtes pas satisfait du validateur de courrier électronique intégré et que vous souhaitez utiliser votre validation de modèle RegExp personnalisée, la directive ng-pattern peut être appliquée et conformément à la documentation documentation , le message d'erreur peut s'afficher comme suit:
Le validateur définit la clé d'erreur de modèle si ngModel. $ ViewValue ne correspond pas à une RegExp
<script>
function Ctrl($scope) {
$scope.text = '[email protected]';
$scope.emailFormat = /^[a-z]+[a-z0-9._]+@[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
Il existe un bel exemple montrant comment traiter ce type de problème lors de la modification de validateurs intégrés angular docs . J'ai seulement ajouté un modèle de validation plus strict.
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);
};
}
}
};
});
Et ajoutez simplement
<input type='email' validate-email name='email' id='email' ng-model='email' required>
Selon la réponse de @scx, j'ai créé une validation pour l'interface graphique
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');
}
});
}
}
});
Et ajoutez simplement:
css
.warning{
border:1px solid red;
}
html
<input type='email' validate-email name='email' id='email' ng-model='email' required>
Il s'agit de la validation de courrier électronique jQuery à l'aide de l'expression rationnelle. vous pouvez également utiliser le même concept pour AngularJS si vous avez une idée de AngularJS.
var expression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
Vous pouvez utiliser ng-messages
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
inclure le module
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>
Vous trouverez ci-dessous le modèle complet de validation de courrier électronique.
<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>
Maintenant, Angular 4 a un validateur de messagerie intégré- __. https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6https: // github .com/angular/angular/pull/13709
Ajoutez simplement email à la balise. Par exemple
<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>
Passez du temps à le faire fonctionner pour moi.
Exigence:
liste unique ou séparée par des virgules d'e-mails avec les domaines se terminant [email protected] ou [email protected]
Manette:
$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>
J'ai trouvé un bon outil de test en ligne sur les regex… .. Couvert ma regex avec des tests:
J'ai essayé avec la regex ci-dessous, il fonctionne bien.
Validation du courrier électronique: \ w + ([- +. ']\W +) @\w + ([-.]\W +).\W + ([-.]\W +) *
J'ai essayé la méthode de @ Joanna et testé sur les sites Web suivants, mais cela n'a pas fonctionné.
Je l'ai ensuite modifié en et cela a fonctionné.
/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+
angularjs controller way, un exemple pour rechercher un ou plusieurs emails dans le corps d’un message.
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');
}
Utilisez ci-dessous l'expression régulière
^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+)+((\.)[a-z]{2,})+$
Il permet
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]