如何使用 ng-pattern 在 angularJs 中验证电子邮件 ID答案

【问题标题】：How to validate email id in angularJs using ng-pattern如何使用 ng-pattern 在 angularJs 中验证电子邮件 ID
【发布时间】：2014-08-20 20:33:35
【问题描述】：

我正在尝试使用 ng-pattern 指令验证 angularJs 中的电子邮件 id 字段。

但我是 AngularJs 的新手。用户输入错误的电子邮件 ID 后，我需要立即显示错误消息。

我下面的代码正在尝试解决。帮助我使用 ng-pattern 获得正确的结果。

<script type="text/javascript" src="/Login/script/ang.js"></script>
<script type="text/javascript">
    function Ctrl($scope) {
        $scope.text = 'enter email';
        $scope.word = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
    }
</script>
    </head>
<body>
    <form name="myform" ng-controller="Ctrl">
        <input type="text" ng-pattern="word" name="email">
        <span class="error" ng-show="myform.email.$error.pattern">
            invalid email!
        </span>
        <input type="submit" value="submit">
    </form>
</body>

【问题讨论】：

你看过stackoverflow.com/questions/18900308/…

标签： regex angularjs email angularjs-directive ng-pattern

【解决方案1】：

如果您想验证电子邮件，请使用 type="email" 而不是 type="text" 的输入。 AngularJS 具有开箱即用的电子邮件验证功能，因此无需为此使用 ng-pattern。

这是原始文档中的示例：

<script>
function Ctrl($scope) {
  $scope.text = 'me@example.com';
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" required>
  <br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.email">
    Not valid email!</span>
  <br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>

有关更多详细信息，请阅读此文档：https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

现场示例：http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

更新：

如果您对内置电子邮件验证器不满意，并且想使用自定义 RegExp 模式验证，则可以应用 ng-pattern 指令，根据documentation，错误消息可以显示如下：

验证器设置模式错误键，如果 ngModel.$viewValue 不匹配正则表达式

<script>
function Ctrl($scope) {
  $scope.text = 'me@example.com';
  $scope.emailFormat = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" ng-pattern="emailFormat" required>
  <br/><br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!
  </span><br/>
  <span class="error" ng-show="myForm.input.$error.pattern">
    Not valid email!
  </span>
  <br><br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.pattern = {{!!myForm.$error.pattern}}</tt><br/>
</form>

Plunker：https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview

【讨论】：

我试过这个，但是当我们使用输入类型作为电子邮件时，它只验证我们在@之后输入内容，而不是它是字母还是数字
我需要通过将输入类型保持为文本来使用该模式，以便它会检查邮件ID中@之后的内容..
我不知道您的代码有什么问题，但我尝试在我的示例中使用您的方法并且效果很好。你可以在这里测试plnkr.co/edit/raac1Cywpa72nxZPmVk2?p=preview
Angular 的电子邮件验证没有考虑所有的验证规则，例如两个连续的点。模式必须是 ^(?("")("".+?(?
我可以使用 $scope.email = "xyz expression" 覆盖表达式

【解决方案2】：

有一个很好的例子来处理这种修改内置验证器angulardocs 的问题。我只是添加了更严格的验证模式。

app.directive('validateEmail', function() {
  var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;

  return {
    require: 'ngModel',
    restrict: '',
    link: function(scope, elm, attrs, ctrl) {
      // only apply the validator if ngModel is present and Angular has added the email validator
      if (ctrl && ctrl.$validators.email) {

        // this will overwrite the default Angular email validator
        ctrl.$validators.email = function(modelValue) {
          return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
        };
      }
    }
  };
});

然后简单地添加

<input type='email' validate-email name='email' id='email' ng-model='email' required>

【讨论】：

{2,4} 错误，扩展名最多 5 个字符，所以 {2,5}
TLD 可以超过 5 个字符！根据data.iana.org/TLD/tlds-alpha-by-domain.txt，最长为 24
如果您在 ASP.NET MVC Razor 页面中执行此操作，您可能需要转义正则表达式中的 @ 字符，如下所示：/^[_a-z0-9]+(\.[_a-z0-9]+)*@@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,5})$/
顺便说一句，实际上电子邮件不应区分大小写（尤其是域名），因此所有a-z 模式都应替换为a-zA-Z。

【解决方案3】：

根据@scx的回答，我为GUI创建了一个验证

app.directive('validateEmail', function() {
  var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
  return {
    link: function(scope, elm) {
      elm.on("keyup",function(){
            var isMatchRegex = EMAIL_REGEXP.test(elm.val());
            if( isMatchRegex&& elm.hasClass('warning') || elm.val() == ''){
              elm.removeClass('warning');
            }else if(isMatchRegex == false && !elm.hasClass('warning')){
              elm.addClass('warning');
            }
      });
    }
  }
});

然后简单地添加：

css

.warning{
   border:1px solid red;
 }

html

<input type='email' validate-email name='email' id='email' ng-model='email' required>

【讨论】：

【解决方案4】：

这是使用正则表达式的 jQuery 电子邮件验证。如果您对 AngularJS 有所了解，也可以对 AngularJS 使用相同的概念。

var expression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

Source.

【讨论】：

看起来这是完美的表达方式。 :)

【解决方案5】：

你可以使用 ng-messages

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

包含模块

 angular.module("blank",['ngMessages']

在html中

<input type="email" name="email" class="form-control" placeholder="email" ng-model="email" required>
<div ng-messages="myForm.email.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>

【讨论】：

ng-message="email" 这就是我要找的 :)

【解决方案6】：

以下是电子邮件验证的完全限定模式。

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

<div ng-message="pattern">Please enter valid email address</div>

【讨论】：

如果您在“@”之前添加允许“-”的选项会很好。
当我们写 some@thing 并且这个正则表达式接受它时失败

【解决方案7】：

现在，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>

【讨论】：

【解决方案8】：

angularjs 控制器方式，只是在邮件正文中查找一封或多封电子邮件的示例。

sp = $scope.messagebody; // email message body

if (sp != null && sp.match(/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+/)) {   
console.log('Error. You are not allowed to have an email in the message body');
}

【讨论】：

【解决方案9】：

我尝试了@Joanna 的方法，并在以下网站上进行了测试，但没有成功。

然后我将它修改为并且它工作了。

/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)\S+

【讨论】：

【解决方案10】：

我已经尝试过以下正则表达式，它工作正常。

电子邮件验证： \w+([-+.']\w+)@\w+([-.]\w+).\w+([-. ]\w+)*

【讨论】：

【解决方案11】：

花点时间让它为我工作。

要求：

单个或逗号分隔的电子邮件列表，域名以 name.surname@gmail.com 或 team-email@list.gmail.com 结尾

控制器：

$scope.email = {
   EMAIL_FORMAT:  /^\w+([\.-]?\w+)*@(list.)?gmail.com+((\s*)+,(\s*)+\w+([\.-]?\w+)*@(list.)?gmail.com)*$/,
   EMAIL_FORMAT_HELP: "format as 'your.name@gmail.com' or comma separated 'your.name@gmail.com, my.name@list.gmail.com'"
};

HTML：

<ng-form name="emailModal">
    <div class="form-group row mb-3">
        <label for="to" class="col-sm-2 text-right col-form-label">
            <span class="form-required">*</span>
            To
        </label>
        <div class="col-sm-9">
            <input class="form-control" id="to"
                   name="To"
                   ng-required="true"
                   ng-pattern="email.EMAIL_FORMAT"
                   placeholder="{{email.EMAIL_FORMAT_HELP}}"
                   ng-model="mail.to"/>
            <small class="text-muted" ng-show="emailModal.To.$error.pattern">wrong</small>
        </div>
    </div>
</ng-form>

我找到了很好的在线正则表达式测试工具。用测试覆盖了我的正则表达式：

https://regex101.com/r/Dg2iAZ/6/tests

【讨论】：

【解决方案12】：

使用下面的正则表达式

^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+)+((\.)[a-z]{2,})+$

允许

test@test.com
test@test.co.in
test@test.gov.us
test@test.net
test@test.software

【讨论】：