Как проверить идентификатор электронной почты в angularJs с помощью ng-pattern

Я пытаюсь проверить поле идентификатора электронной почты в angularJs, используя директиву ng-pattern.

Но я новичок в AngularJs. Мне нужно показать сообщение об ошибке, как только пользователь вводит неверный идентификатор электронной почты.

Код, который у меня ниже, я пытаюсь решить. Помогите мне с использованием ng-pattern для получения правильного результата.

<script type="text/javascript" src="/Login/script/ang.js"></script>
<script type="text/javascript">
    function Ctrl($scope) {
        $scope.text = 'enter email';
        $scope.word = /^[a-z]+[a-z0-9._][email protected][a-z]+\.[a-z.]{2,5}$/;
    }
</script>
    </head>
<body>
    <form name="myform" ng-controller="Ctrl">
        <input type="text" ng-pattern="word" name="email">
        <span class="error" ng-show="myform.email.$error.pattern">
            invalid email!
        </span>
        <input type="submit" value="submit">
    </form>
</body>

Ответ 1

Если вы хотите проверить электронную почту, используйте вход с типом = "email" вместо type = "text". У AngularJS есть подтверждение электронной почты из коробки, поэтому нет необходимости использовать ng-pattern для этого.

Вот пример из оригинальной документации:

<script>
function Ctrl($scope) {
  $scope.text = '[email protected]';
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" required>
  <br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.email">
    Not valid email!</span>
  <br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>

Подробнее читайте в этом документе: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

Пример в реальном времени: http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

UPD:

Если вас не устраивает встроенный модуль проверки подлинности электронной почты, и вы хотите использовать свою собственную проверку шаблона RegExp, тогда можно применить директиву ng-pattern и в соответствии с документацией сообщение об ошибке может отображаться следующим образом:

Валидатор устанавливает ключ ошибки шаблона, если ngModel. $viewValue не соответствует RegExp

<script>
function Ctrl($scope) {
  $scope.text = '[email protected]';
  $scope.emailFormat = /^[a-z]+[a-z0-9._][email protected][a-z]+\.[a-z.]{2,5}$/;
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" ng-pattern="emailFormat" required>
  <br/><br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!
  </span><br/>
  <span class="error" ng-show="myForm.input.$error.pattern">
    Not valid email!
  </span>
  <br><br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.pattern = {{!!myForm.$error.pattern}}</tt><br/>
</form>

Plunker: https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview

Ответ 2

Есть хороший пример того, как справиться с такой проблемой, модифицируя встроенные валидаторы angulardocs. Я добавил только строгий шаблон проверки.

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);
        };
      }
    }
  };
});

И просто добавьте

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

Ответ 3

В соответствии с ответом @scx я создал проверку для GUI

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');
            }
      });
    }
  }
});

И просто добавьте:

CSS

.warning{
   border:1px solid red;
 }

HTML

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

Ответ 4

Вы можете использовать ng-messages

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

включает модуль

 angular.module("blank",['ngMessages']

в html

<input type="email" name="email" class="form-control" placeholder="email" ng-model="email" required>
<div ng-messages="myForm.email.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>

Ответ 5

Ниже приведен полный образец проверки электронной почты.

<input type="text" pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]*\.([a-z]{2,4})$/" ng-model="emailid" name="emailid"/>

<div ng-message="pattern">Please enter valid email address</div>

Ответ 6

Теперь Angular 4 имеет встроенный модуль проверки подлинности электронной почты https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

Просто добавьте email в тег. Например

  <form #f="ngForm">
    <input type="email" ngModel name="email" required email>
    <button [disabled]="!f.valid">Submit</button>
    <p>Form State: {{f.valid?'VALID':'INVALID'}}</p>
  </form>

Ответ 7

angularjs controller, просто пример поиска одного или нескольких сообщений электронной почты в теле сообщения.

sp = $scope.messagebody; // email message body

if (sp != null && sp.match(/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+/)) {   
console.log('Error. You are not allowed to have an email in the message body');
}

Ответ 8

Это проверка правильности электронной почты jQuery с использованием выражения Regex. вы также можете использовать ту же концепцию для AngularJS, если у вас есть идея AngularJS.

var expression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

Источник.

Ответ 9

Я попробовал метод @Joanna и протестировал его на следующих веб-сайтах, и это не сработало.

Затем я модифицировал его и работал.

/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+