繁体   English   中英

覆盖AngularJS默认电子邮件验证程序

Override AngularJS Default Email Validator

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想覆盖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

在此先感谢您的帮助!

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> 

1 覆盖django中的默认验证器

鉴于模型领域 my_number = models.PositiveIntegerField(validators=[ MaxValueValidator(360) ]) 有没有办法覆盖最小和最大默认验证器? 上面我只是添加一个新的验证器,它在服务器上运行良好。 但是,我将验证器 ...

2 覆盖默认的angular2验证器

我想为text类型的&lt;input&gt;创建可绑定版本的pattern验证。 这是代码: 但是此验证器不会禁用默认值,因此值首先使用null模式进行验证,并且控制始终无效。 有什么方法可以做到正确吗? ...

4 JSF 2.2:扩展/重写默认必需的验证器

我有一种情况,我需要覆盖或扩展默认的所需验证器,以便在缺少所需值时可以在服务器端执行一些操作。 我只是通过扩展标准RequiredValidator进行了尝试,但是当提交的值不为null时,验证器只会被触发: xhtml: 我读到上下文参数: 但我不想在全球范围内仅 ...

5 覆盖复合组件中输入的默认验证器

我正在开发带有默认验证器的复合组件,该验证器可以与限制性更强的自定义验证器一起使用。 但是,它没有按预期工作。 我将问题归结为如下: 不会执行对maximum=5的验证或省略结果,因为只有maximum=10规则才能产生正确的反馈: Text field: 123456789 ...

6 Grails覆盖默认电子邮件验证

我发现grails验证也拒绝某些有效的电子邮件地址。 我已经在GitHub上开设了一个问题在这里 有没有办法覆盖grails中的默认电子邮件验证,以便我可以为此目的编写自己的验证器? 编辑 我通过在BuildConfig.groovy中添加最新版本的apache common ...

9 电子邮件验证器

我的电子邮件验证码有问题。 我不断收到未定义我的函数的错误。 我已经为Java代码制作了一个javascript文件,然后使用html中的onchange来触发该功能。 ...

10 Angular 2/4:与默认电子邮件验证程序相关的模式如何应用

目前,我试图与领先的尾部空间中的所有电子邮件输入地图是false的有效性方面。 我们定义了以下输入: 请注意, pattern属性中的正则表达式不允许使用空格。 但是,只要type="email"诸如“ john@company.com”之类的字符串,只要type="email"其有 ...

2018-03-20 22:45:32 0 19   angular
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM