用于验证电子邮件不起作用的 ng 模式



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

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的行为不同?
  • 我的代码有问题吗?

PS:我知道input type="email"registerEmployerForm.email.$error.email相结合是Angular的方法。不幸的是,我无法在这里实现它,因为正则表达式不应该传递类似naveen@naveennaveen

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

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

更新

我可以看到这在 @ 后用 2 个点的小提琴不起作用,但在这里它有效:在线正则表达式测试

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])$/

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

最新更新