Question

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

这是我的formBuilder：

 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])],
     });

为什么Validator声称这是一封电子邮件，例如上面的示例，是无效的？有一个更好的方法吗？

Answer 1

您可以扩展Validator interface并创建email validator指令，如下所示，以便您也可以在另一种形式中使用相同的指令：

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

Answer 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,}))$/;

}

电子邮件验证Ionic2

2 个答案: