AngularJS电子邮件验证不一致

Question

我有一种情况，角度验证认为电子邮件是有效的，尽管它不是。该验证认为有效的条件是example@domain 是否存在可接受地址的情况？

<div class="form-group" ng-class="{ 'has-error': clientForm.email.$dirty && clientForm.email.$invalid, 'has-success': clientForm.email.$valid }">
        <label>Email</label>
        <span class="text-danger" ng-show="clientForm.email.$error.required">Email is required.</span>
        <span class="text-danger" ng-show="clientForm.email.$error.email">Invalid email address.</span>
        <input type="email" name="email" class="form-control input-sm" ng-model="client.email" required />
      </div>

Answer 1

您可以根据需要使用自定义指令来验证它。这是一个例子。

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  $scope.client = {};
})
.directive('validEmail', function(emailRegex) {
  return {
    require: 'ngModel',
    link: function($scope, $element, $attrs, ngModel) {
      ngModel.$validators.validEmail = function(val) {
        if (!val) { return true; }
        return emailRegex.test(val);
      };
    }
  };
})
.value('emailRegex', /^(([^<>()[\]\\.,;:\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,}))$/)
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<form ng-app="myApp" ng-controller="myCtrl" name="form">
  <label>Email</label>
  <span class="text-danger" ng-show="form.email.$error.required">Email is required.</span>
  <span class="text-danger" ng-show="form.email.$error.validEmail">Invalid email address.</span>
  <input type="text" name="email" ng-model="client.email" required valid-email/>
</form>

但是，您应该知道，使用 RegEx 验证电子邮件比您想知道的要复杂得多。 Read this.