2016-08-12 6 views
2

Мне нужен этот ввод, когда пользователь не использует действительный адрес электронной почты.Подтверждающий адрес электронной почты

принимает вид получает красную границу или появляется сообщение (зависания) рядом с полем

HTML

<body ng-controller="simulacaoController"> 
    <input type="text" ng-class="{red: cadastro.$invalid}" ng-model="email" name="email" placeholder="E-Mail" ng-pattern="mascaraEmail" class="last" required /> 
</body> 

AngularJS

angular.module("simulacao", []); 
angular.module("simulacao").controller("simulacaoController", function($scope){ 
    $scope.mascaraEmail = "/^[a-zA-Z0-9][a-zA-Z0-9\._-][email protected]([a-zA-Z0-9\._-]+\.)[a-zA-Z-0-9]{2,3}/"; 
}); 

CSS

.red { 
    border: solid 1px red; 
} 

Мой код: https://fiddle.jshell.net/kvxcsync/2/

ответ

6

Вы можете использовать тип входа email:

<input type="email" ... /> 

More about input types.

+2

Очень здорово. Я сам этого не знал. Тем не менее, как раз то, что известно OP, оно может не поддерживаться у «пожилых» бродяг, особенно IE10. Per: http://caniuse.com/#search=email – JonSG

+4

Эта и другие проверки HTML5 не работают в Safari. Требуется полифония, например [webshims] (https://github.com/aFarkas/webshim). – smddzcy

+0

Самое смешное, что «a @ b» действительный адрес электронной почты: p –

-1

Вы должны добавить входной тип = "электронная почта" и добавить <form></form> теги для надлежащей формы проверки

<body ng-controller="simulacaoController"> 
 
    <form> 
 
    <input type="email" ng-class="{red: cadastro.$invalid}" ng-model="email" name="email" placeholder="E-Mail" ng-pattern="mascaraEmail" class="last" required /> 
 
    </form> 
 
</body>

+0

Это автоматическое обнаружение, когда пользователь нажимает куда-то вне входа? –

+0

Я не согласен с этим минус-голосованием, потому что ... type = 'email' сам является ответом ... – Gopinath

1

AngularJS не имеет проверки электронной почты, так нет необходимости использовать нг-шаблон для этого

<body ng-controller="simulacaoController"> 
    <form name="myForm"> 
     <input type="name" ng-class="{red: cadastro.$invalid}" ng-model="text" name="email" placeholder="E-Mail" class="last" required /> 
<form name="myForm" ng-controller="Ctrl"> 
     Email: <input type="email" name="input" ng-model="text" required> 
     <br> 
     <span class="red" ng-show="myForm.email.$error.email"> 
     Not a valid email! 
     </span> 
    </form> 
    </body> 

Reference link

Смежные вопросы