如何使用API​​验证Angle中的电子邮件地址？

Question

如何以角度验证电子邮件地址？。

提交表单时，我的电子邮件就像admin @ g一样，不会将其检测为错误。我在laravel API中使用了Angular。

<div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" name="email" [(ngModel)]="form.email" #email="ngModel" [ngClass]="{'is-invalid': f.submitted && email.invalid}"
              required email placeholder="Enter your email address"/>
            <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
              <div *ngIf="email.errors.required">>> required</div>
              <div *ngIf="email.errors.email">>> must be a valid email address</div>
            </div>
          </div>    

Answer 1

正如其他人指出的那样，您的示例电子邮件地址（admin @ g）看起来正确。您要使用的API检查电子邮件地址是否正确。您可以使用Real Email之类的服务来进行深入的电子邮件地址检查，以测试该帐户是否处于活动状态。

在Angular中，您可以创建一个异步表单验证器，如..

@Injectable({ providedIn: 'root' })
export class AsyncEmailValidator implements AsyncValidator {
  private apiKey?: string; // put your api key here
  constructor(private http: HttpClient) {}

  validate(
    ctrl: AbstractControl
  ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    if (ctrl.value) {
      return this.http
        .get<{ status: string }>('https://isitarealemail.com/api/email/validate', {
          params: { email: ctrl.value },
          headers: {
            Authorization: this.apiKey ? 'Bearer ' + this.apiKey : [],
          },
        })
        .toPromise()
        .then((result) => {
          if (result.status === 'invalid') {
            return { invalid: true };
          } else if (result.status === 'unknown') {
            return { invalid: true };
          } else {
            // status is valid
            return null;
          }
        });
    } else {
      return Promise.resolve({invalid: true});
    }
  }
}

然后您可以在表单定义中使用它。

emailFormControl = new FormControl('', {
    updateOn: 'blur',
    asyncValidators: [this.emailValidator.validate.bind(this.emailValidator)],
});

然后将其绑定到html

<input [formControl]="emailFormControl" />

有关更深入的文章，请参见angular email validation，并获得一个API密钥以解锁Real Email处的使用限制