表单验证 - 电子邮件验证在AngularJs中未按预期工作

I am using Angular for form validation.

我正在使用Angular进行表单验证。

Here is what I use - plunker-edit I have taken this code from Angularjs documentation - Binding to form and control state Have used type as email but when I run this and enter abc@abc it says it is valid. How do I fix this ?

这是我使用的 - plunker-edit我从Angularjs文档中获取此代码 - 绑定到表单和控件状态已使用类型作为电子邮件但是当我运行它并输入abc @ abc时它表示它是有效的。我该如何解决？

<!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 : I am a beginner in AngularJs

P.S：我是AngularJs的初学者

Edit:

编辑：

Also the following inputs wer also shown valid

此外，以下输入也显示有效

aaa@aaa
AAA @ AAA
aaa---aaa@gmail.com
aaa---aaa@gmail.com
aaa`aaa@aaa
aaa`aaa @ AAA

Expected Valid Emails

预期的有效电子邮件

aabc@ddd.com
aabc@ddd.com
aaa.aaa@fddd.co.in
aaa.aaa@fddd.co.in
aaa@ddd.co.uk
aaa@ddd.co.uk

5 个解决方案

#1

Refer to my another answer: AngularJS v1.3.x Email Validation Issue

请参阅我的另一个答案：AngularJS v1.3.x电子邮件验证问题

Try to use ng-pattern in your email input.

尝试在电子邮件输入中使用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>

It fits your valid and invalid cases.

它适合您的有效和无效案件。

See an example: plunk

看一个例子：plunk

#2

These emails are valid, as they can be local emails or to an intranet email server: Domains.

这些电子邮件是有效的，因为它们可以是本地电子邮件或Intranet电子邮件服务器：域。

The TLD is not required for local emails. As shown in the Wikipedia example, the domain may even contain an IP Address in place of the domain.

本地电子邮件不需要TLD。如Wikipedia示例所示，域甚至可以包含IP地址来代替域。

#3

As ReCaptcha suggested I ended up creating a custom validation directive

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

and in html

并在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

Even better, now, Angular has email validator built-in, from Angular 4 onwards https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

更好的是，现在，Angular内置了电子邮件验证器，从Angular 4开始https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/角/拉/ 13709

Just add email to the tag. For example

只需添加电子邮件到标签。例如

  <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>

#5

I have written a directive that uses the same email validation regular expression that ASP.Net uses. While this may not cover 100% of scenarios, it will cover the vast majority and works perfectly for what we need to cover.

我编写了一个使用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);
        };
    }
};
}

Use it like this:

像这样用它：

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

#1