Angular 13电子邮件验证示例|如何在typecript中检查电子邮件是否无效？

你将学习如何在Angular和Typescript应用程序中使用输入表单进行电子邮件验证。

邮件验证是避免无效邮件的基本验证之一。

在Angular中，可以使用两种方法进行验证。-反应式表单

• 模板驱动表单的电子邮件模式验证用多种方法实现-angular-form-validations.

Angular电子邮件验证的反应式表单

邮件验证是在反应式表单中使用内置的Angular指令实现的。对于Angular应用程序使用反应式表单。

在app.module.ts ，首先导入FormsModule 和ReactiveFormsModule 模块。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

让我们创建一个新的组件reactive-email-validation ，使用ng g component command.

A:\work\angular-form-validations>ng g component reactive-email-validation
CREATE src/app/reactive-email-validation/reactive-email-validation.component.html (40 bytes)
CREATE src/app/reactive-email-validation/reactive-email-validation.component.spec.ts (747 bytes)
CREATE src/app/reactive-email-validation/reactive-email-validation.component.ts (350 bytes)
CREATE src/app/reactive-email-validation/reactive-email-validation.component.scss (0 bytes)
UPDATE src/app/app.module.ts (973 bytes)

开始，在Angular中构建一个HTML模板组件来显示带有电子邮件字段的输入表单。

• 用FormGroup directive 定义表单元素，并绑定emailForm
• 在表单中，用formControlName 名称电子邮件定义输入元素
• 验证错误被绑定，并可通过emailForm.controls[email]
• 输入框不是空的(errors.required)并且焦点在它上面(touched)时，添加验证检查。
• 如果绑定的错误包含必填，显示错误信息 "电子邮件是必填的
• 如果错误包含模式，显示错误信息 "无效的电子邮件"。

<p>Angular Email Validation with Reactive form!</p>
<div>
    <h2>{{ heading | titlecase }}</h2>
    <form [formGroup]="emailForm">
        <input type="text" formControlName="email" />
        <div *ngIf="!emailForm.controls['email'].valid && emailForm.controls['email'].touched">
            <div *ngIf="emailForm.controls['email'].errors?['required']" style=" background-color: red">
                Email is required
            </div>
            <div *ngIf="emailForm.controls['email'].errors?['required']" style="background-color: red">
                Invalid Email
            </div>
        </div>
    </form>

    <button type="submit ">Submit</button>
</div>

接下来，在应用程序的控制器组件中，定义REGEX模式验证的逻辑。

• 声明emailForm的类型FormGroup ，它已经与表单元素绑定。
• 在变量中定义了email regular expression pattern
• 在构造函数中，用新的FormControl元素初始化emailForm，即email
• 这些电子邮件表单控件将与HTML模板中的输入元素绑定。
• Validators.required 增加了非空的验证检查
• Validators.pattern 增加了电子邮件的正则表达式
• 这些验证是通过blur 事件`updateOn: blur'属性检查的。

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-email-validation',
  templateUrl: './reactive-email-validation.component.html',
  styleUrls: ['./reactive-email-validation.component.scss']
})
export class ReactiveEmailValidationComponent {
  heading = 'angular Email pattern validation with examples';
  emailForm: FormGroup;

  myusername: string = '';
  emailRegex =
    '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';

  constructor() {
    this.emailForm = new FormGroup({
      email: new FormControl('', {
        validators: [Validators.required, Validators.pattern(this.emailRegex)],
        updateOn: 'blur',
      }),
    });
  }
  submit() {
    console.log(this.emailForm.value);
  }
  get validator() {
    return true;
  }

}

使用html5的Angular电子邮件模板驱动的表单验证

在现代浏览器中，简单的方法是用内置的html5语言进行电子邮件模式验证。

另一种做电子邮件验证的方法是在HTML元素中定义input type=email 。然而，这只支持html5和现代浏览器。

输入被定义为具有以下属性

type=email 是一个输入文本框，只接受电子邮件 属性值是电子邮件值的正则表达式模式 指令支持从视图到控制器的双向绑定，反之亦然 指令可以改变ngModel值的行为，这将通过 事件触发。pattern NgModel ngModelOptions updateon:blur

以下是一个完整的代码

<input type="email" name="email" id="email" placeholder="abc@gmail.com" [(ngModel)]="email" [ngModelOptions]="{ updateOn: 'blur' }" #emailerror="ngModel" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$ "        required />

在组件中，只需在这里声明输入元素的名称和默认值。

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  heading = 'angular html5 Email pattern validation  example';

  email: string = '';
}

类型化的电子邮件搜索引擎验证

有时，我们想做一个验证的typescript文件。

• 它使用上述同样的正则表达式模式来验证电子邮件
• 使用正则表达式创建正则对象
• pattern. test 对所提供的电子邮件进行检查，并返回true-valid。

  public isValidEmail(emailString: string): boolean {
    try {
      let pattern = new RegExp("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$");
      let valid = pattern.test(emailString);
      return valid;
    } catch (TypeError) {
      return false;
    }
  }
}
}
console.log(this.isValidEmail('abc@gmail.com')); // true
console.log(this.isValidEmail('abc')); // false
a

总结

在这篇文章中，你学到了

• 使用反应式表单的Angular电子邮件模式验证示例
• HTML 5输入型电子邮件表单验证
• 类型脚本的电子邮件验证