Usar o 'ng-pattern' para validar o e-mail nos AngularJS

Sou novo no Angular e tenho dificuldade em obter o padrão ng para validar o endereço de E-mail com base num REGEX. De facto, a outra validação angular por omissão para o e-mail também altera o comportamento e só mostra um erro se o campo inteiro estiver vazio quando eu inserir o ng-pattern. Inicialmente tentou usar diretivas e Controladores, mas descobriu que o padrão ng pode alcançar (em teoria) o mesmo efeito de validar o e-mail assim decidiu usar isso.

usei vários padrões REGEXOS e leia sobre o padrão do GN como a partir de: validação Regex do padrão do GNvalidação do formuláriovalidação de formulário fácil e muitos outros links, mas nada funciona. Alguém consegue descobrir o que preciso de fazer para que as coisas funcionem ?

  <form name="userForm" novalidate>
    <div class="row">
                    <div class="large-12 medium-12 small-12 columns">
                        <label>Username</label>
                            <input type="email" name="username" placeholder="[email protected]" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern = "/^(?("")("".+?(?<!\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'*\+/=\?\^`\{\}\|~\w])*)(‌​?<=[0-9a-z])@))(?([)([(\d{1,3}\.){3}\d{1,3}])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-‌​z0-9][\-a-z0-9]{0,22}[a-z0-9]))$/" required />
                            <div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$invalid">
                              <small class="error" ng-show="userForm.username.$error.required">
                                     Your email is required.
                              </small>
                              <small class="error" ng-show="userForm.username.$error.email">
                                     Please input a valid email.
                              </small>
                              <small class="error" ng-show="userForm.firstname.$error.maxlength">
                                    Your email cannot be longer than 100 characters
                              </small>                        
                            </div>
                    </div>
</form>
Author: Community, 2016-02-11
Source

3 answers

Por favor, mude o seu padrão ng para corresponder a esta expressão regular: 

ng-pattern = '/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i'

Esta expressão regular irá indicar um erro se a secção a seguir a @ for deixada em branco. Esta expressão regular aceitará unicode também.

Espero que ajude.
 8
Author: ashfaq.p, 2016-02-11 07:33:27

Existe um erro na sua expressão regular. Usei este simples validador de E-mail e funcionou bem com poucas alterações para mostrar erros adequados 

<div class="row">
  <div class="large-12 medium-12 small-12 columns">
      <label>Username</label>
          <input type="email" name="username" placeholder="[email protected]" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern="/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/" required />
          <div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$error"> 
            <small class="error" ng-show="userForm.username.$error.required">
                   Your email is required.
            </small>
            <small class="error" ng-show="userForm.username.$error.pattern">
                   Please input a valid email.
            </small>
            <small class="error" ng-show="userForm.username.$error.maxlength">
                  Your email cannot be longer than 100 characters
            </small>                        
          </div>
  </div>
</div>
 2
Author: Narendra CM, 2016-02-11 06:15:58
O problema estava na minha região. Acabei por usar: ng-pattern='/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' required />
 2
Author: Afshin Ghazi, 2016-02-11 07:14:04