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

Question

嗨，我正在开发angularjs应用程序，其中我正在验证电子邮件ID。 每当我输入test @ test时，都会出现错误消息。 但它不起作用。

下面是我的代码。

       <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时的字段的屏幕截图

以下是我输入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>