Проверка формы - проверка электронной почты не работает должным образом в AngularJs

Я использую Angular для проверки формы.

Вот что я использую - plunker-edit Я взял этот код из документации Angularjs - Связывание для формирования и управления state Использовал тип как email, но когда я запустил его и запустил [email protected], он говорит, что он действителен. Как это исправить?

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example100-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="">
    <div ng-controller="Controller">
    <form name="form" class="css-form" novalidate>
      E-mail:
        <input type="email" ng-model="user.email" name="uEmail" required/><br />
      <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
        <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
        <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
      </div>
    </form>
  </div>
</body>
</html>

P.S: Я новичок в AngularJs

Edit:

Также следующие входы также показаны действительными

Ожидаемые действительные сообщения

Ответы

Ответ 1

Обратитесь к моему другому ответу: AngularJS v1.3.x Ошибка проверки электронной почты

Попробуйте использовать ng-pattern в вашем элементе ввода электронной почты.

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

Он соответствует вашим действительным и недействительным случаям.

См. пример: plunk

Ответ 2

Эти письма действительны, так как они могут быть локальными или на почтовом сервере интрасети: Домены.

TLD не требуется для локальных электронных писем. Как показано в примере в Википедии, домен может содержать IP-адрес вместо домена.

Ответ 3

Как ReCaptcha предложил мне создать настраиваемую директиву проверки

var app = angular.module('login-form', []);
var INTEGER_REGEXP = new RegExp('^[a-z0-9]+(\.[_a-z0-9]+)*@@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,50})$', 'i');
app.directive('cemail', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                if (INTEGER_REGEXP.test(viewValue)) {
                    // it is valid
                    ctrl.$setValidity('cemail', true);
                    return viewValue;
                } else {
                    // it is invalid, return undefined (no model update)
                    ctrl.$setValidity('cemail', false);
                    return undefined;
                }
            });
        }
    };
});

и в html

<label>Email</label>
<input id="UserName" name="UserName" type="text" value="" data-ng-model="email" required="" cemail>
<span data-ng-show="form.UserName.$dirty && form.UserName.$invalid">
    <span data-ng-show="form.UserName.$error.required">Required</span>
    <span data-ng-show="form.UserName.$error.cemail">Invalid Email</span>
</span>

Ответ 4

Я написал a directive, который использует тот же email validation regular expression, который использует ASP.Net. Хотя это может не охватывать 100% сценариев, оно будет охватывать подавляющее большинство и прекрасно работает для того, что нам нужно покрыть.

function email() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) {
            return false;
        }

        function isValidEmail(value) {
            if (!value) {
                return false;
            }
            // Email Regex used by ASP.Net MVC
            var regex = /^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/i;
            return regex.exec(value) != null;
        }

        scope.$watch(ctrl, function () {
            ctrl.$validate();
        });

        ctrl.$validators.email = function (modelValue, viewValue) {
            return isValidEmail(viewValue);
        };
    }
};
}

Используйте его следующим образом:

<input type="email" ng-model="$scope.emailAddress" name="newEmailAddress" email/>

Ответ 5

Еще лучше, теперь Angular имеет встроенный модуль проверки подлинности электронной почты, начиная с 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>