Angular 通用电子邮件验证程序

我想创建一个表单，用户将在其中输入他的电子邮件。我想在客户端验证电子邮件格式

Angular 2中是否有通用的电子邮件验证程序

---

注意：类似于。

我想刚才没有电子邮件验证程序，但添加自定义验证程序非常容易。看到了吗，我使用了与angular1相同的正则表达式

函数emailValidator（控件）{
var EMAIL(a-z0-9)REGEXP=/^[a-z0-9！$%&'*+\/=？^-]+@[a-z0-9]（[a-z0-9-]*[a-z0-9]）（\.[a-z0-9]（[a-z0-9-]*[a-z0-9]）*$/i；
如果（！EMAIL_REGEXP.test（control.value））{
返回{invalidEmail:true}；
}
}

您可以使用表单指令和控件来执行此操作

export class TestComponent implements OnInit {
     myForm: ControlGroup;
     mailAddress: Control;

     constructor(private builder: FormBuilder) {
         this.mailAddress = new Control(
            "",
            Validators.compose([Validators.required, GlobalValidator.mailFormat])
        );
     }

     this.addPostForm = builder.group({
            mailAddress: this.mailAddress
     });
}

进口：

import { FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES } from 'angular2/common';

然后您的

GlobalValidator

类：

export class GlobalValidator {

    static mailFormat(control: Control): ValidationResult {

        var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

        if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
            return { "incorrectMailFormat": true };
        }

        return null;
    }  
}

interface ValidationResult {
    [key: string]: boolean;
}

导出类GlobalValidator{
静态邮件格式（控件：控件）：ValidationResult{
var EMAIL(a-z0-9)REGEXP=/^[a-z0-9！$%&'*+\/=？^-]+@[a-z0-9]（[a-z0-9-]*[a-z0-9]）（\.[a-z0-9]（[a-z0-9-]*[a-z0-9]）*$/i；
如果（control.value！=“”&（control.value.length这里是使用正则表达式验证字段的另一种方法。您可以将方法绑定到字段的keyUp事件

在您的组件中：

import {NgForm} from 'angular2/common';

//...

emailValidator(email:string): boolean {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\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,}))$/;

    if (!EMAIL_REGEXP.test(email)) {
        return false;
    }
    return true; 
}

从'angular2/common'导入{NgForm}；
//...
emailValidator（电子邮件：字符串）：布尔值{
var EMAIL \[u REGEXP=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}]）；（[a-zA Z-0-9]+-Z]-/[a-Z]-]；
如果（！EMAIL_REGEXP.test（EMAIL））{
返回false；
}
返回true；
}

在HTML（视图）中


电子邮件地址
电子邮件地址无效

另一个选项（必填字段+用户离开字段时验证）


电子邮件地址
此字段必填
电子邮件地址无效

此方法适用于任何验证，因此您可以更改RegEx并验证信用卡、日期、时间等。
您只能使用html：

<md-input-container class="md-icon-float md-block" flex-gt-sm>
    <label>Email</label>
        <input md-input
            id="contact-email"
            type="text"
            ngControl="email"
            #email="ngForm"
            [(ngModel)]="contact.email"
            required
            pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$">

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


电子邮件
电子邮件是必需的
电子邮件无效
对于角度为4及以上者：

根据您可以使用“电子邮件验证程序”

例如：

如果使用模板驱动的表单：

<input type="email" name="email" email>
<input type="email" name="email" email="true">
<input type="email" name="email" [email]="true">



如果您使用模型驱动的表单（又称ReactiveFormsModule），请使用验证程序。电子邮件：

this.myForm = this.fb.group({
    firstName: ['', [<any>Validators.required]],
    email: ['', [<any>Validators.required, <any>Validators.email]],
});

this.myForm=this.fb.group({
名字：[''[Validators.required]]，
电子邮件：[''，[Validators.required，Validators.email]]，
});


旧答案：您可以使用angular 2FormGroup

通过使用validators.pattern和regex，如下所示：

 let emailRegex = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
 this.myForm = this.fb.group({
        firstName: ['', [<any>Validators.required]],
        email: ['', [<any>Validators.required,  <any>Validators.pattern(emailRegex) ]],
 });

让emailRegex='^[a-z0-9]+（\.[U a-z0-9]+）*@[a-z0-9-]+（\.[a-z0-9-]+）*（\.[a-z]{2,15}）$；
this.myForm=this.fb.group({
名字：[''[Validators.required]]，
电子邮件：[''[Validators.required，Validators.pattern（emailRegex）]，
});
另一种方法是使用自定义指令。我喜欢这种方法，因为它与其他ng2验证程序更一致

import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
import { Validator, AbstractControl } from '@angular/forms';


@Directive({
    selector: '[validateEmail][formControlName], [validateEmail][formControl],[validateEmail][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EmailValidator), multi: true }
    ]
})
export class EmailValidator implements Validator {

    constructor() {
    }

    validate(c: AbstractControl) {
        let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

        return EMAIL_REGEXP.test(c.value) ? null : {
            validateEmail: {
                valid: false
            }
        };


    }}

那么html中的用法是

<input class="form-control" 
               type="email"
               [(ngModel)]="user.emailAddress" 
               name="emailAddress" 
               placeholder="first.last@example.com"
               validateEmail

我认为现在你可以在这里使用浏览器验证。电子邮件字段有很好的支持，你可以从
元素中获得验证结果。validity.valid
。你只需要通过Angular自定义验证程序就可以了

有关详细信息，请参见和。
您也可以使用反应式表单，这使得验证匹配更容易：

this.form = new ValidationManager({
  'email'       : 'required|email',
  'password'    : 'required|rangeLength:8,50'
});

以及以下观点：

<form [formGroup]="form.getForm()" (ngSubmit)="save()">

    <div class="form-group">
      <label>Email</label>
      <input type="text" class="form-control" formControlName="email">
      <div *ngIf="form.hasError('email')" class="alert alert-danger">
        {{form.getError('email')}}
      </div>
    </div>

    <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" formControlName="password">
      <div *ngIf="form.hasError('password')" class="alert alert-danger">
        {{form.getError('password')}}
      </div>
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
</form>


电子邮件
{{form.getError（'email'）}
密码
{{form.getError（'password'）}
提交
角度4的更新

ngOnInit() {
    this.user = new FormGroup({
        name: new FormGroup({
            firstName: new FormControl('',Validators.required),
            lastName: new FormControl('')
        }),
        age: new FormControl('',null,validate),
        email: new FormControl('',emailValidator),
    // ...
    });
}

验证器

export function emailValidator(control: AbstractControl):{[key: string]: boolean} {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\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,}))$/;
    if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
        return {invalid:true};
    }
    return null;
}

导出函数emailValidator（控件：AbstractControl）：{[key:string]：boolean}{
var EMAIL \[u REGEXP=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}]）；（[a-zA Z-0-9]+-Z]-/[a-Z]-]；
如果（control.value！=“”&（control.value.length我正在使用：

npm安装ng2验证--保存ng2验证

我没有详细回答您的问题，但是对于许多常见的场景，您可以找到已经实现的自定义验证器

你的例子是：
电子邮件：[''[CustomValidators.email]]

Best Reagards，
其中一个限制是Angular2仍然不允许异步验证器中的http请求。这个问题在github上仍然存在：注意！！！这里的正则表达式电子邮件\u REGEXP构造不正确，它显示此邮件有效：asd@f"@该电子邮件地址有效。但限制为5个以上字符与此正则表达式不一致。angular 2.4.1中用于控制的是什么？如果我不喜欢
xxx@gmail
如果
.com
无效，我更喜欢这种方法，而不是使用基于代码的解决方案…谢谢！FWIW，随着.google、.bike.等新域名的出现，电子邮件验证模式需要调整。这可能会有所帮助：对于HTML5中的JavaScript，这是一种模式：
pattern=“^[a-zA-Z0-9.！$%&'*+/=？^`{zA-Z0-9-][a-zA-Z0-9-][（？：\.[a-zA-Z0-9-]）*$”/code>对我有效的模式是：pattern=”^（\\w|[0-9.！|$%&'*+/=？^\`{{124;}-]+@（\\ w|[0-9-]）+（？：[.]（\\w|[0-9-]）+）*”请注意，双反斜杠。该模式在每个“w”之前只有一个反斜杠无法工作。原因可能是该字符串位于@Component的pattern属性内。但不确定。尝试为电子邮件编写符合RFC的正则表达式可能会非常复杂。人们对此争论了多年。我uld建议最好的正则表达式是在@符号前检查某物，然后在其后检查某物并加上一个点。然后向地址发送电子邮件验证。这看起来像：pattern=“.++.+\..+”我的浏览器冻结
this.form = new ValidationManager({
  'email'       : 'required|email',
  'password'    : 'required|rangeLength:8,50'
});

<form [formGroup]="form.getForm()" (ngSubmit)="save()">

    <div class="form-group">
      <label>Email</label>
      <input type="text" class="form-control" formControlName="email">
      <div *ngIf="form.hasError('email')" class="alert alert-danger">
        {{form.getError('email')}}
      </div>
    </div>

    <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" formControlName="password">
      <div *ngIf="form.hasError('password')" class="alert alert-danger">
        {{form.getError('password')}}
      </div>
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
</form>

ngOnInit() {
    this.user = new FormGroup({
        name: new FormGroup({
            firstName: new FormControl('',Validators.required),
            lastName: new FormControl('')
        }),
        age: new FormControl('',null,validate),
        email: new FormControl('',emailValidator),
    // ...
    });
}

export function emailValidator(control: AbstractControl):{[key: string]: boolean} {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\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,}))$/;
    if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
        return {invalid:true};
    }
    return null;
}

<div class="row">
    <div class="col-md-12">
        <md-input-container>
            <input mdInput type="text" placeholder="Email" formControlName="email">
        </md-input-container>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <span *ngIf="user.get('email').touched && !user.get('email').valid && !user.get('email').pristine">
            <small>Invalid email</small>
        </span>
    </div>
</div>