Angular2中的通用邮件验证程序

我想创建一个用户将输入邮件的表单.我想验证客户端的邮件格式.Angular2中是否有任何通用邮件验证程序？

注意:类似于angularjs验证器:https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

1> Mush..：

---

你只能使用html:

    Email
        

    

        

            Email is required
        
        

            Email is invalid
        
    

---

FWIW,带有.google,.bike等新的域名结尾.以及许多其他人需要调整电子邮件验证模式.这可能会有所帮助:http://emailregex.com/对于HTML5中的JavaScript,这就是模式:```pattern ="^ [a-zA-Z0-9.!#$%&'*+/=？^ _` {|}〜 - ] + @ [A-ZA-Z0-9 - ] +(:\ [A-ZA-Z0-9 - ] +)*$"```

2> Asaf Hananel..：

---

角度4及以上:

根据这个你可以使用"电子邮件验证器".

例:

如果您使用模板驱动的表单:

如果您使用模型驱动的表单(又名ReactiveFormsModule),请使用Validators.email:

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

---

旧答案:你可以使用angular 2 FormGroup,

通过使用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: ['', [Validators.required]],
        email: ['', [Validators.required,  Validators.pattern(emailRegex) ]],
 });

---

这是允许的,如果我输入这种格式`ram.ram @ ra`.这意味着它将在电子邮件ID上没有点(.)的情况下接受.

3> AdrienTorris..：

---

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

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

然后你的HTML:

    Email
    
    

        
mailAddressis required.
        
Email format is invalid.
    

有关这方面的更多信息,您可以阅读这篇好文章:https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg或查看此github项目以获取工作示例.

(编辑:reg ex似乎没有检查域中的点

我改用这个

/^(([^<>()\[\]\\.,;:\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,}))$/

cfr http://emailregex.com/

4> 小智..：

---

这是使用RegEx验证字段的另一种方法.您可以将方法绑定到该字段的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; 
}

在你的HTML(视图)中

    Email address
    
    
Email address is invalid

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

    Email address
    
    
This field is required
    
Email address is invalid

此方法适用于任何验证,因此您可以更改RegEx并验证信用卡,日期,时间等...

5> 小智..：

---

另一种方法是使用自定义指令.我喜欢这种方法,因为它与其他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中使用是