码迷,mamicode.com
首页 > Web开发 > 详细

argularjs validateEmail

时间:2015-09-23 19:38:44      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:



There is nice example how to deal with this kind of problem modyfing built-in validators angulardocs. I have only added more strict validation pattern.

app.directive(‘validateEmail‘, function() {
  var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;

  return {
    require: ‘ngModel‘,
    restrict: ‘‘,
    link: function(scope, elm, attrs, ctrl) {
      // only apply the validator if ngModel is present and Angular has added the email validator
      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);
        };
      }
    }
  };
});

And simply add

<input type=‘email‘ validate-email name=‘email‘ id=‘email‘ ng-model=‘email‘ required>  

app.directive(‘validateEmail‘, function() {
  var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
  return {
    link: function(scope, elm) {
      elm.on("keyup",function(){
            var isMatchRegex = EMAIL_REGEXP.test(elm.val());
            if( isMatchRegex&& elm.hasClass(‘warning‘) || elm.val() == ‘‘){
              elm.removeClass(‘warning‘);
            }else if(isMatchRegex == false && !elm.hasClass(‘warning‘)){
              elm.addClass(‘warning‘);
            }
      });
    }
  }
});

And simply add :

css

.warning{
   border:1px solid red;
 }

html

<input type=‘email‘ validate-email name=‘email‘ id=‘email‘ ng-model=‘email‘ required>

argularjs validateEmail

标签:

原文地址:http://my.oschina.net/u/2357525/blog/510333

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!