Question

我使用以下模式验证电子邮件

var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;

从这个小提琴复制模式。（http://jsfiddle.net/jquery4u/5rPmV/）效果很好。

我尝试像这样使用AngularJS实现相同的

    <input type="text" placeholder="Email" ng-model="Employer.Email" ng-pattern="emailPattern" class="form-control" name="email" required />
    <p ng-show="showMessages && registerEmployerForm.email.$error.required" class="text-danger">
      Email is required.
    </p>
    <p ng-show="showMessages && !registerEmployerForm.email.$error.required && registerEmployerForm.email.$error.pattern" class="text-danger">
      Email is invalid.
    </p>

的JavaScript

$scope.showMessages = true;
$scope.Employer = {
  "Email": ""
};
$scope.emailPattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;
$scope.RegisterEmployer = function(myForm) {
    console.log(myForm)
};

我的小提琴：http://jsfiddle.net/codeandcloud/jusoqs88/

问题在于，如果我尝试 naveen@naveennaveen.com ，第一个小提琴通过，第二个小提琴失败。我的问题

为什么相同的模式AngularJS表现不同？
我的代码有什么用吗？

P.S：我知道input type="email"结合registerEmployerForm.email.$error.email是 Angular 的方式。不幸的是我不能在这里实现它，因为正则表达式不应该传递像naveen@naveennaveen

这样的东西

Answer 1

以下是电子邮件验证的正则表达式：

var re = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;

<强>更新

我可以看到@之后这不适用于2个点，但这里有效：regex test online

<强> UPDATE2

看起来小提琴有问题，在你的代码中尝试这个，它会起作用：

var re = /^("")("".+?(?<!\)""@)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'*\+=\?\^`\{\}\|~\w])*)(‌?<=[0-9a-z])@))([)([(\d{1,3}\.){3}\d{1,3}])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-‌z0-9][\-a-z0-9]{0,22}[a-z0-9])$/

Answer 2

    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
    <script>
    var app = angular.module('ngApp', ['ngTagsInput']);

    app.controller('MainCtrl', function($scope, $http) {
      $scope.tags = [
        { text: 'abdo@tatwerat.com' },
        { text: 'info@tatwerat.com' },
        { text: 'admin@tatwerat.com' }
      ];
    });

    </script>
   <div ng-app="ngApp" ng-controller="MainCtrl">
      <tags-input ng-model="tags" placeholder="Add Emails" allowed-tags-pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"></tags-input>
      <p>Emails : {{tags}}</p>
   </div>

用于验证电子邮件无效的ng-pattern

2 个答案: