Question

这是我的输入

aby-saturn@gmail.com

连字符无法在emailid中获取无效的电子邮件ID 这是我的ng-pattern

<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
        <input class="form-control" type="email" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" noncapitalize required />
    </div>
    <div style="color: red" id="emailError"></div>
    <span style="color:red;" class="email-error" ng-show="loginForm.submitted && loginForm.email.$error.required">Required</span>
    <span style="color:red" class="error" ng-show="loginForm.submitted && loginForm.email.$error.pattern">Email not valid</span>
</div>

Answer 1

以下是用于电子邮件验证的regexp。

<强> ^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$

您可以测试此正则表达式here

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body ng-app="">

<p>Try writing in the input field:</p>

<form name="myForm">
<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
        <input class="form-control" type="text" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="/^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/" noncapitalize required />
    </div>
    <div style="color: red" id="emailError"></div>
    <span style="color:red;" class="email-error" ng-show="myForm.email.$error.required">Required</span>
    <span style="color:red" class="error" ng-show="myForm.email.$error.pattern">Email not valid</span>
</div>
</form>


</body>
</html>

请跑上面的SNIPPET

Here is a working DEMO

Answer 2

我想你不想允许＆＃39; - ＆＃39;要在电子邮件地址中，以下是我使用ng-pattern的内容，如果您需要＆＃39; - ＆＃39;允许检查第二个例子：

1）如果＆＃39; - ＆＃39;不允许：

＆＃13;

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.user = {
      email: 'test@test.com'
    };

    $scope.emailPattern = /^(([^-<>()\[\]\\.,;:\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,}))$/;
  });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController">

  <form name="loginForm">
    <div class="form-group">
      <div class="input-group">
        <input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
      </div>
      <div style="color: red" id="emailError">
        <span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
        <span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
      </div>
    </div>
  </form>

</div>

＆＃13;

2）如果＆＃39; - ＆＃39;被允许：

＆＃13;

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.user = {
      email: 'test@test.com'
    };

    $scope.emailPattern = /^(([^<>()\[\]\\.,;:\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,}))$/;
  });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController">

  <form name="loginForm">
    <div class="form-group">
      <div class="input-group">
        <input class="form-control" id="email" name="email" placeholder="Enter Email" ng-model="user.email" ng-pattern="emailPattern" noncapitalize required />
      </div>
      <div style="color: red" id="emailError">
        <span style="color:red;" class="email-error" ng-show="loginForm.email.$error.required">Required</span>
        <span style="color:red" class="error" ng-show="loginForm.email.$error.pattern">Email not valid, doesn't match the provided pattern</span>
      </div>
    </div>
  </form>

</div>

＆＃13;

电子邮件验证无法在angularjs中运行？

2 个答案: