Question

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

使表单变为红色边框或在字段旁边显示一条消息（悬停）

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\._-]+@([a-zA-Z0-9\._-]+\.)[a-zA-Z-0-9]{2,3}/";
});

CSS

.red {
    border: solid 1px red;
}

我的代码：https://fiddle.jshell.net/kvxcsync/2/

Answer 1

您可以使用输入类型email：

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

More about input types.

Answer 2

AngularJS已经过电子邮件验证，因此无需为此

使用ng-pattern

<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

Answer 3

您必须添加输入类型=＆＃34;电子邮件＆＃34;并添加<form></form>标签以进行正确的表单验证

＆＃13;

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

＆＃13;

验证电子邮件地址

3 个答案: