Convalida del modulo - La convalida dell'e-mail non funziona come previsto in AngularJs

Sto usando Angolare per la convalida del modulo.Convalida del modulo - La convalida dell'e-mail non funziona come previsto in AngularJs

Ecco quello che uso - plunker-edit Ho preso questo codice dalla documentazione Angularjs - Binding to form and control state avere un tipo utilizzato come email ma quando ho eseguito questo ed entro [email protected] dice che è valido. Come posso risolvere questo?

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-example100-production</title> 


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script> 
    <script src="script.js"></script> 



</head> 
<body ng-app=""> 
    <div ng-controller="Controller"> 
    <form name="form" class="css-form" novalidate> 
     E-mail: 
     <input type="email" ng-model="user.email" name="uEmail" required/><br /> 
     <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid: 
     <span ng-show="form.uEmail.$error.required">Tell us your email.</span> 
     <span ng-show="form.uEmail.$error.email">This is not a valid email.</span> 
     </div> 
    </form> 
    </div> 
</body> 
</html>

PS: Sono un principiante in AngularJs

Edit:

anche i seguenti ingressi wer anche mostrati validi

aaa @ aaa
aaa --- aaa @ gmail.com
aaa`aaa @ aaa

attesi email valide

fonte

2014-05-15 Yasser

abc @ abc è, per quanto ne so, un indirizzo email di dominio locale valido. - e 'sono anche caratteri validi in un indirizzo e-mail – ivarni

Ecco l'angoletto regexp sta usando btw: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L12 – ivarni

controllare questo è possibile utilizzare ng-messages http://stackoverflow.com/questions/24490668/how-to-validate-email-id-in-angularjs-using-ng-pattern/38463063#38463063 –

riferimento al mio un'altra risposta: AngularJS v1.3.x Email Validation Issue

tenta di utilizzare ng-modello nella tua e-mail in ingresso.

<input type="email" name="input" ng-model="text" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required>

Si adatta ai casi validi e non validi.

vedere un esempio: plunk

fonte

2014-05-15 08:01:23 jackypan1989

Non riesce se la prima lettera dell'email è in maiuscolo. Cioè [email protected] non riesce, ma [email protected] no. Ho usato questa regex invece - 'ng-pattern =". {1,} @ [_ a-z0-9A-Z] + (\. [A-z0-9A-Z] +) + "' –

quando uso il ng-pattern affatto mi dà "Impossibile caricare il template" - qualche idea del perché? - copiato il codice, nessun errore prima di – Pakk

Stranamente funziona bene per me in termini di angolare aggiungendo la classe ng-invalid basata sul pattern mentre la proprietà form.input. $ error.email sembra essere ancora impostata in base al costruito nella convalida della posta elettronica. Quindi il mio stile della casella di input funziona bene, ma il messaggio di errore si presenta falsamente ... –

Queste email sono validi, in quanto possono essere e-mail locali o un server di posta elettronica intranet: Domains.

Il TLD non è richiesto per le e-mail locali. Come mostrato nell'esempio di Wikipedia, il dominio potrebbe anche contenere un indirizzo IP al posto del dominio.

fonte

2014-05-15 07:44:28

Nel mio caso l'utente sarebbe inserendo il suo indirizzo email con un tld. Come convalido in quel caso? – Yasser

@Yasser È possibile utilizzare la convalida personalizzata nel proprio caso, utilizzando un'espressione regolare personalizzata. –

Come ReCaptcha suggerito ho finito per creare una direttiva di convalida personalizzato

var app = angular.module('login-form', []); 
var INTEGER_REGEXP = new RegExp('^[a-z0-9]+(\.[_a-z0-9]+)*@@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,50})$', 'i'); 
app.directive('cemail', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elm, attrs, ctrl) { 
      ctrl.$parsers.unshift(function (viewValue) { 
       if (INTEGER_REGEXP.test(viewValue)) { 
        // it is valid 
        ctrl.$setValidity('cemail', true); 
        return viewValue; 
       } else { 
        // it is invalid, return undefined (no model update) 
        ctrl.$setValidity('cemail', false); 
        return undefined; 
       } 
      }); 
     } 
    }; 
});

e in html

<label>Email</label> 
<input id="UserName" name="UserName" type="text" value="" data-ng-model="email" required="" cemail> 
<span data-ng-show="form.UserName.$dirty && form.UserName.$invalid"> 
    <span data-ng-show="form.UserName.$error.required">Required</span> 
    <span data-ng-show="form.UserName.$error.cemail">Invalid Email</span> 
</span>

fonte

2014-05-15 08:44:51 Yasser

Ho scritto un directive che utilizza la stessa email validationregular expression utilizzato da ASP.Net. Anche se questo non può coprire il 100% degli scenari, coprirà la stragrande maggioranza e funziona perfettamente per ciò che dobbiamo coprire.

function email() { 
return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, elem, attrs, ctrl) { 
     if (!ctrl) { 
      return false; 
     } 

     function isValidEmail(value) { 
      if (!value) { 
       return false; 
      } 
      // Email Regex used by ASP.Net MVC 
      var regex = /^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/i; 
      return regex.exec(value) != null; 
     } 

     scope.$watch(ctrl, function() { 
      ctrl.$validate(); 
     }); 

     ctrl.$validators.email = function (modelValue, viewValue) { 
      return isValidEmail(viewValue); 
     }; 
    } 
}; 
}

Utilizzare in questo modo:

<input type="email" ng-model="$scope.emailAddress" name="newEmailAddress" email/>

fonte

2015-04-03 18:07:30 dball

Ancora meglio, ora, angolare ha validatore e-mail incorporato, da angolare 4 in poi https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

Basta aggiungere email a il tag. Ad esempio

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

fonte

2017-04-17 05:44:37

Convalida del modulo - La convalida dell'e-mail non funziona come previsto in AngularJs

risposta

Problemi correlati