覆蓋AngularJS默認電子郵件驗證程序

Question

我想覆蓋AngularJS的電子郵件驗證程序。 我希望它使用我的自定義字符串來驗證電子郵件地址。 我在他們的文檔中找到的代碼是這樣的：JS：

   var app = angular.module('registrationApp', []);

    app.directive('overwriteEmail', function() {
      var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;

      return {
        require: 'ngModel',
        restrict: '',
        link: function(scope, elm, attrs, ctrl) {
            if (ctrl && ctrl.$validators.email) {

                // this will overwrite the default Angular email validator
                ctrl.$validators.email = function(modelValue) {
                    return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
                }
            }
        }
    }
});

HTML：

<div data-ng-app="registrationApp" data-ng-init="">
  <form name="form" class="css-form" novalidate>
  <div>
      Overwritten Email:
      <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
      <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!     </span><br>
      Model: {{myEmail}}
    </div>
  </form>
</div>

但代碼不起作用。 拋出的錯誤是：

TypeError：無法在N（ http://ajax.googleapis.com/ajax/libs/ ）讀取鏈接（ http：// localhost：63342 / goga_tests / js / registration.js:39:32 ）的undefined屬性'email'。 angularjs / 1.2.26 / angular.min.js:54:372 ）at g（ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256 ）at g（ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:273 ）在N（ http://ajax.googleapis.com/ajax/libs/angularjs /1.2.26/angular.min.js:54:313）at g（ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:47:256 ） （ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:54:313）at g（ http://ajax.googleapis.com/ajax/libs/angularjs/ 1.2.26 / angular.min.js:47:256 ) http：//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:46:377 at http：// ajax .googleapis.com / AJAX /庫/ angularjs / 1.2.26 / angular.min.js：18：314

在此先感謝您的幫助！

Answer 1

您正在使用的角度版本1.2.26不會在ngModel控制器實例上添加$validators特殊屬性。 你需要1.3.x版本的角度。

如果您有1.3.x，您可以按原樣使用您的指令，並且您可以將優先級2添加到大於ng-model（這是1），以便您的指令在ng-model指令輪到之前設置驗證器：

app.directive('overwriteEmail', function() {
  var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;

  return {
    require: 'ngModel',
    restrict: '',
    priority: 2,
    link: function(scope, elm, attrs, ctrl) {
      if (ctrl && ctrl.$validators.email) {
        // this will overwrite the default Angular email validator
        ctrl.$validators.email = function(modelValue) {
          return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
        }
      }
    }
  }
});

演示

 var app = angular.module('app', []); app.directive('overwriteEmail', function() { var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\\.com$/i; return { require: 'ngModel', restrict: '', priority: 1, link: function(scope, elm, attrs, ctrl) { if (ctrl && ctrl.$validators.email) { // this will overwrite the default Angular email validator ctrl.$validators.email = function(modelValue) { return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue); } } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <div ng-app="app"> <div> <form name="form" class="css-form" novalidate> <div> Overwritten Email: <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" /> <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid! </span> <br>Model: {{myEmail}} </div> </form> </div> </div> 

你也可以堅持使用ng-pattern並使用form.overwrittenEmail.$error.pattern來顯示無效模式的消息。

<input type="email" ng-pattern="/^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i" 
                    ng-model="myEmail" name="overwrittenEmail" />
   <span ng-show="form.overwrittenEmail.$error.pattern">

演示

 var app = angular.module('app', []); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div> <form name="form" class="css-form" novalidate> <div> Overwritten Email: <input type="email" ng-model="myEmail" ng-pattern="/^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\\.com$/i" name="overwrittenEmail" /> <span ng-show="form.overwrittenEmail.$error.pattern">This email format is invalid! </span> <br>Model: {{myEmail}} </div> </form> </div> </div>