驗證電子郵件地址

我需要此輸入通知用戶何時不使用有效的電子郵件地址。驗證電子郵件地址

採取的形式得到紅色邊框或出現一條消息（懸停）字段旁邊

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/

來源

2016-08-12 Pedro Henrique Kuzminskas

您可以使用輸入型email：

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

More about input types.

來源

2016-08-12 18:58:20 Timo

非常酷。我自己並沒有意識到這一點。然而，OP意識到，它可能不支持「老」browsers，特別是IE10。每個：http://caniuse.com/#search=email – JonSG

這和其他HTML5表單驗證不適用於Safari。像[webshims]（https://github.com/aFarkas/webshim）這樣的polyfill是必需的。 – smddzcy

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

-1

您必須添加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>

個

來源

2016-08-12 19:11:08 Gopinath

它是自動檢測用戶何時按下輸入以外的地方？ –

我不同意這個減投票，因爲... 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

來源

2016-08-12 19:33:22

驗證電子郵件地址

回答

相關問題