时间戳

首页 > 解决方案 > 如何使用 Angular 5 验证电子邮件

javascript - 如何使用 Angular 5 验证电子邮件

问题描述

我想知道如何使用 .com 验证我的电子邮件我尝试了所有方法，但我不能，你能帮帮我吗？我正在总结我已经开发的代码，我是这个角度的新手，我发现在这个主题上很困难。如果用户键入 .com，我希望验证电子邮件，但直到现在我只得到基本验证，例如：example @ example。我希望它是 example@example.com

谢谢

.ts

   import { ActivatedRoute, Params, Router } from "@angular/router";
import { Component, OnInit, Inject, } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder } from '@angular/forms';
import { Observable, Subscription } from "rxjs";
import { ModelDataForm } from "./modelDataForm";
import { DOCUMENT } from "@angular/platform-browser";
import 'rxjs/add/operator/filter'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})



export class AppComponent implements OnInit {

  userService: any;
  isTCAccepted: any;
  private subscription: Subscription;
  uri: string;
  ssid: string;
  sessiondId: string;
  ip: string;
  mac: string;
  ufi: string;
  mgmtBaseUrl: string;
  clientRedirectUrl: string;
  req: string;
  userName: string;
  hmac: string;

  name: string;
  email: string;

  //checkbox
  isValidFormSubmitted: boolean = null;




  constructor(@Inject(DOCUMENT) private document: any, private route: ActivatedRoute) {
  }

  //checkbox
  onFormSubmit() {
    this.isValidFormSubmitted = false;
    if (this.userForm.invalid) {
      return;
    }
    this.isValidFormSubmitted = true;
    this.isTCAccepted = this.userForm.get('tc').value;

  }


  ngOnInit() {
    this.route.queryParams
      .filter(params => params.mac)
      .subscribe(params => {
        console.log(params);

        this.ssid = params.ssid;
        this.sessiondId = params.sessionId;
        this.ip = params.ip;
        this.mac = params.mac;
        this.ufi = params.ufi;
        this.mgmtBaseUrl = params.mgmtBaseUrl;
        this.clientRedirectUrl = params.clientRedirectUrl;
        this.req = params.req;
        this.hmac = params.hmac;
      });
  }



  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}'),
    Validators.email,
  ]);

  nameFormControl = new FormControl('', [
    Validators.required,
  ]);



  userForm = new FormGroup({
    tc: new FormControl('', [(control) => {
      return !control.value ? { 'required': true } : null;
    }])
  });

}

html

<mat-form-field class="hcs-full-width">

  <input matInput placeholder="Nome" [formControl]="nameFormControl" [(ngModel)]="name">
  <mat-error *ngIf="nameFormControl.hasError('required')">
    Nome é
    <strong>requirido</strong>
  </mat-error>
</mat-form-field>


<mat-form-field class="hcs-full-width">
  <input matInput  placeholder="E-mail" [formControl]="emailFormControl" [(ngModel)]="email" >
  <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required') && !emailFormControl.hasError('pattern')">
    Por favor entre com um endereço de e-mail valido
  </mat-error>
  <mat-error *ngIf="emailFormControl.hasError('required')">
    E-mail é
    <strong>requirido</strong>
  </mat-error>
</mat-form-field>

<br>

<div class="checkbox">
  <mat-checkbox class="hcs-full-width" formControlName="tc">
  </mat-checkbox>
  Aceito os termos e condições de uso
  <a data-toggle="collapse" href="#collapseExample">
    ver os termos
  </a>
</div>
<mat-error *ngIf="userForm.get('tc').invalid && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass]="'error'">
  É necessário aceitar os termos de uso
</mat-error>


<br>

<button mat-button type="submit" class="btn btn-primary btn-lg btn-block button-size" (click)="Logar()">Enviar</button>

<div class="space"></div>

标签： javascripthtmlangulartypescript

解决方案

试试这个简单的正则表达式，

if (emailString.match(/[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9A-Z](?:[a-z0-9A-Z]*[a-z0-9A-Z])?\.)+[a-z0-9A-Z](?:[a-z0-9A-Z]*[a-z0-9A-Z])?/)) {
    return null;
  } else {
    return { 'invalidEmailAddress': true };
  }

检查这个 Stackblitz 示例 演示

推荐阅读