Angular2 电子邮件验证

【问题标题】：Angular2 email validationAngular2 电子邮件验证
【发布时间】：2017-07-11 00:51:58
【问题描述】：

我是学习 Angular2 的新手，我想制作一个验证表单，在 RegEx 模式之后验证电子邮件。

我的代码看起来像这样，但我不知道我是否做对了，或者我做错了什么，有人可以帮帮我吗？

谢谢！

我修好了。非常感谢大家。

<div class="alert-email">
    <label for="contactemail">EMAIL: </label>
    <input type="email" id="contactemail" name="contactemail"
           required ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
           [(ngModel)]="model.contactemail" #contactemail="ngModel"
           placeholder="Your email" /><br><br>
    <div *ngIf="contactemail.errors && (contactemail.dirty || contactemail.touched)" class="alert-email alert-danger-email"><br>
      <div [hidden]="!contactname.errors.required">
        Email is required
      </div>
      <div [hidden]="!contactname.errors">
        Please input a valid email.
      </div>
    </div>
  </div>

【问题讨论】：

你必须删除正则表达式分隔符/

标签： angular email-validation

【解决方案1】：

Angular 4 有一个内置的“电子邮件”验证标签，可以添加到输入中。例如：

<input type="email" id="contactemail" email>

这将适用于一系列数字和字母，然后是 @，然后是另一系列字母。它不会考虑 @ 之后的点 - 因为您可以在输入和标准正则表达式中使用“模式”标签。

【讨论】：

仅从 Angular4 开始可用
当以这种方式使用它时，输入是隐含的——即使没有指定“必需”。错误或功能？
已解决。有了这个<input type="text" class="form-control" #userEmail="ngModel" name="email" [(ngModel)]="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" [ngClass]="{invalid : userEmail.touched && !userEmail?.valid}" required email>
电子邮件地址不需要以 .com 或类似名称结尾。 user@localhost 有效
*ngIf 显示错误信息的条件应该是什么？？

【解决方案2】：

试试类似的东西

<div class="alert-email">
        <label>Email</label>
            <input
                id="contactemail"
                type="text"                
                #contactemail="ngModel"
                [(ngModel)]="model.contactemail"
                required
                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

        <div class="md-errors-spacer" [hidden]="contactemail.valid || contactemail.untouched">
            <div  *ngIf="contactemail.errors && contactemail.errors.required">
                Email is required
            </div>
            <div  *ngIf="contactemail.errors && contactemail.errors.pattern">
                Email is invalid
            </div>
        </div>
    </div>

【讨论】：

您应该相应地更改新的顶级域名
公司电子邮件 user.Email" class="form-control" pattern="[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[. ]{1}[a-zA-Z]{2,}" 必填 #CompanyEmail="ngModel" placeholder="请输入公司电子邮件地址" />

公司电子邮件是必需的。
电子邮件无效
使用 Angular5 为我工作。按原样复制模式，按原样复制“电子邮件无效”div。
这看起来像是另一个临时正则表达式，它将接受无效地址并拒绝有效地址。不要自己动手。

【解决方案3】：

Angular 4 电子邮件验证：

在您的输入中使用电子邮件
如果您希望 .com 用于电子邮件，请使用模式 pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.- ]{2,}[.]{1}[a-zA-Z]{2,}

决赛：

`<input type="email" [(ngModel)]="enterEmail" name="myEmail" #myEmail="ngModel" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>`

【讨论】：

[a-zA-Z0-9.**-**_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,} 中有错误。必须转义减号。我更喜欢^[a-zA-Z]{1}[a-zA-Z0-9.\-_]*@[a-zA-Z]{1}[a-zA-Z.-]*[a-zA-Z]{1}[.][a-zA-Z]{2,}$
提示：任何包含{1} 的正则表达式都是由刚刚开始学习正则表达式的人编写的。

【解决方案4】：

您可以将此模式用于您的电子邮件输入：

^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$

ref

除了“sample@domain.dom”之外，该模式还接受“sample@domain”。使用此电子邮件模式“sample@domain”。不可接受且不允许使用 1 个字母的域 tld（“sample@domain.s”出错）。

【讨论】：

【解决方案5】：

对于单个字段中的多个电子邮件验证，您可以使用自定义电子邮件验证器。

import { FormControl } from '@angular/forms';

export class EmailValidator {

public static isValid(email) {
    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,}))$/;
    return re.test(String(email).toLowerCase());
}

static isMultiValid(control: FormControl): any {

  console.log(control.value);
  let tempEmail = control.value;
  let invalid = false;
  let regex =/[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;

  if(tempEmail.indexOf(',') > -1){
    var emails = control.value.split(',');
      for (let email of emails) {
        console.log(email);
        let isValid = EmailValidator.isValid(email)
        if(!isValid){
          return{"email not valid":isValid}
        }
      }
      return null;
  }
  else{
    let email = control.value.split(',');
    if( email == "" || ! regex.test(email)){
        invalid = true;
        return {
            "email not valid": invalid
        };
    }
    console.log("valid");
    return null;

   }
  }
}

【讨论】：

【解决方案6】：

试试这个：

^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$

【讨论】：

您好，欢迎来到 StackOverflow！虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。请阅读导览，How do I write a good answer?

【解决方案7】：

这种模式对我有用，它可以接受字母数字字符和“。”特殊字符。

^[\\w]+(?:\\.[\\w])*@(?:[a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$

【讨论】：

【解决方案8】：

这种模式的电子邮件工作：

 <input  pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

【讨论】：

【解决方案9】：

这个pattern 为我工作：

 pattern="[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{3,}"

【讨论】：

【解决方案10】：

试试这个，它会起作用的：

^[a-zA-Z]+([.-]?[a-zA-Z0-9]+)*@([a-zA-Z]+([.-]?[a-zA-Z]))[.]{1}[a-zA-Z]{2,}$

【讨论】：