Question

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

以下是我使用的内容 - plunker-edit我从Angularjs文档中获取了此代码 - Binding to form and control state使用了类型email但是当我运行此代码并输入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：我是AngularJs的初学者

编辑：

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

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

预期有效电子邮件

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

Answer 1

请参阅我的另一个答案：AngularJS v1.3.x Email Validation Issue

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

Answer 2

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

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

Answer 3

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

只需将电子邮件添加到代码中即可。例如

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

Answer 4

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

Answer 5

我写了一个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/>

Answer 6

角度6

我通常不希望使用$$$ @ $$$格式，并且总是希望使用TLD（例如.com，.net，.org等）。

除了有角度的func({1, 2, 3});验证程序外，我还添加了正则表达式email以使其正常工作。

pattern

pattern =“ ^ \ S * [@] \ S * [。] \ S * $”将确保有一个@和一个。然后是一个字符串。这将是Angular电子邮件验证的补充。

表单验证 - 电子邮件验证在AngularJs中无法正常工作

6 个答案: