Angular js电子邮件验证不适用于域名

Question

您好我正在开发angularjs应用程序，其中我正在验证电子邮件ID。每当我进入测试@测试错误消息应该来。但它不起作用。

以下是我的代码。

       <div class="inputblock with-icon mail" ng-class="{ 'has-error' : ((form.$submitted && form.email.$invalid)|| (form.email.$invalid && form.email.$dirty))}">
                        <label class="inputblock-label" ng-show="user.email">{{ 'Email' | translate }}</label>
                        <span class="input-icon"><img src="images/mail-icon.png"></span>
                        <div>
                            <span class="ang-error" style="color:#fff" ng-show="form.email.$dirty && form.email.$invalid">
                                <span ng-show="form.email.$error.required && form.email.$dirty">* {{'Required' | translate}}</span>
                                <span style="color:#fff" ng-show="form.email.$error.email">{{'Invalid EmailId' | translate}}</span>
                            </span>
                        </div>
                        <input type="email" 
                               class="with-icon" 
                               ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" 
                               placeholder="{{ 'Email' | translate }}" 
                               ng-model="user.email" 
                               required="" 
                               name="email" 
                               my-maxlength="50">
                    </div>

每当我进入test @ test时，我可以在浏览器中看到以下代码

<input type="email" class="with-icon ng-dirty ng-valid-required ng-invalid ng-invalid-pattern ng-valid-email ng-touched" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" placeholder="Email" ng-model="user.email" required="" name="email" my-maxlength="50" ng-trim="True">

下面是我进入test @ test时的屏幕截图

下面是我进入测试@时的屏幕截图

我可以知道如何修复上述错误？任何帮助，将不胜感激。谢谢

Answer 1

你可以试试这个：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,3}$/;
    $scope.model = "test@test";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <form name="form">
         <input type="text" ng-model="model" id="input" name="input" ng-pattern="emailPattern" /><br>
         <p>input valid? = {{form.input.$valid}}</p>
  </form>
</div>