通用电子邮件验证器 [英] Generic email validator

查看:27
本文介绍了通用电子邮件验证器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Angular 2 中是否有任何通用的电子邮件验证器?

注意:类似于 AngularJS 验证器.>

解决方案

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

导出类 TestComponent 实现 OnInit {myForm:控制组;邮件地址:控件;构造函数(私有构建器:FormBuilder){this.mailAddress = 新控件("",Validators.compose([Validators.required, GlobalValidator.mailFormat]));}this.addPostForm = builder.group({邮件地址:this.mailAddress});}

导入:

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

然后你的 GlobalValidator 类:

导出类 GlobalValidator {静态邮件格式(控制:控制):验证结果{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))) {返回 { "incorrectMailFormat": true };}返回空;}}接口验证结果{[键:字符串]:布尔值;}

然后是您的 HTML:

<label for="mailAddress" class="req">电子邮件</label><input type="text" ngControl="mailAddress"/><div *ngIf="mailAddress.dirty && !mailAddress.valid" class="alert alert-danger"><p *ngIf="mailAddress.errors.required">mailAddress 是必需的.</p><p *ngIf="mailAddress.errors.incorrectMailFormat">电子邮件格式无效.</p>

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

(那个正则表达式似乎没有检查域中的点

我用这个代替

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

I want to create a form where the user will enter his email. I'd like to validate email format client-side.

Is there any generic email validator in Angular 2?

NB: Something similar to AngularJS validator.

解决方案

You can use Form Directives and Control to do this.

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:

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

Then your GlobalValidator class:

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

And then your HTML:

<div class="form-group">
    <label for="mailAddress" class="req">Email</label>
    <input type="text" ngControl="mailAddress" />
    <div *ngIf="mailAddress.dirty && !mailAddress.valid" class="alert alert-danger">
        <p *ngIf="mailAddress.errors.required">mailAddressis required.</p>
        <p *ngIf="mailAddress.errors.incorrectMailFormat">Email format is invalid.</p>
    </div>
</div>

For more information about this, you can read this good article : https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.jrdhqsnpg or see this github project for a working example.

(edit : that reg ex does not seem to check for a dot in the domain

I use this one instead

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

这篇关于通用电子邮件验证器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆