验证电子邮件地址

问题描述：

我需要此输入通知用户何时不使用有效的电子邮件地址。验证电子邮件地址

采取的形式得到红色边框或出现一条消息（悬停）字段旁边

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/

答

您可以使用输入型email：

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

More about input types.

非常酷。我自己并没有意识到这一点。然而，OP意识到，它可能不支持“老”browsers，特别是IE10。每个：http://caniuse.com/#search=email – JonSG

这和其他HTML5表单验证不适用于Safari。像[webshims]（https://github.com/aFarkas/webshim）这样的polyfill是必需的。 – smddzcy

最有趣的事情是'a @ b'是有效的电子邮件地址：p –

答

您必须添加INPUT TYPE = “电子邮件”，并添加<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>

个

它是自动检测用户何时按下输入以外的地方？ –

我不同意这个减投票，因为... type ='email'本身就是一个答案...... – Gopinath

答

AngularJS有电子邮件验证所以没有必要使用NG-模式这个

<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

验证电子邮件地址

相关推荐