电子邮件验证 Ionic2答案

【问题标题】：Email Validation Ionic2电子邮件验证 Ionic2
【发布时间】：2017-03-03 07:02:28
【问题描述】：

我正在使用 Ionic2 构建应用程序。在应用程序中，我有一个表单，它使用 formBuilder 来验证每个输入字段。我认为对于电子邮件输入字段，我只会使用带有正则表达式字符串的 Validators.pattern。但是在尝试了多种不同的正则表达式之后，我无法让它工作。表单显示该字段无效，即使我输入了有效的电子邮件地址，例如“thisisanemail@gmail.com”。问题不在于正则表达式，而在于我对验证器的实现。

这是我的表单生成器：

 this.inputGroup = this.formBuilder.group({
    fullName : ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
    email : ['', Validators.compose([Validators.required, Validators.pattern('/^(([^<>()\[\]\\.,;:\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,}))$/')])],
    subject : ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
    message : ['', Validators.compose([Validators.maxLength(500), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
     });

为什么验证器声明是电子邮件（例如上面的示例）是无效的？有一个更好的方法吗？

【问题讨论】：

您的正则表达式在电子邮件字段中唯一应该做的就是检查某处是否有@。然后，您的应用程序需要实际尝试向其发送电子邮件（并让用户单击链接以确定它到达了正确的位置）。我没有更仔细地查看您的正则表达式，但我相信它会有很多误报和误报。其他正则表达式也是如此——为什么只允许只包含 ASCII 字母和空格的名称？你已经排除了一半的爱尔兰/苏格兰人口......

标签： regex validation angular ionic2

【解决方案1】：

您可以扩展Validator interface 并创建如下电子邮件验证器指令，以便您也可以以其他形式使用相同的指令：

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

@Directive({
  selector: '[email-validator][formControlName],[email-validator][ngModel]',
  providers: [{provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true}]
})

class EmailValidatorDirective implements Validator {
  validate(c: AbstractControl): {[key: string]: any} {
    let regExp = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

    if (!regExp.test(c.value)) {
      return {"invalidEmail": true};
    }

    return null;
  }
}

【讨论】：

【解决方案2】：

这样做没有指令

验证：

      this.form = this.formBuilder.group(this.createValitation());

      private createValitation() {
        return {
          email: ['', [<any>Validators.required, <any>Validators.pattern(GlobalValidator.EMAIL_REGEX)]]
        };
      }

正则表达式：

export class GlobalValidator {

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

}

【讨论】：