npm 包 ng5-validation 使用教程

ng5-validation 是一个用于 Angular 5+ 的验证器库，它提供了多种内置的验证器，可以帮助开发者更加方便地对表单数据进行验证。本文将会介绍如何使用 ng5-validation 完成表单验证的操作。

安装

使用 ng5-validation 很简单，只需要在你的 Angular 项目中执行以下命令：

npm install ng5-validation --save

引入模块

在您的 Angular 模块中引入 ng5-validation 模块：

import { Ng5ValidationModule } from 'ng5-validation';

@NgModule({
  imports: [
    Ng5ValidationModule
  ]
})
export class AppModule { }

使用

ng5-validation 主要提供了两大类型的验证器，文本类型和数字类型。下面是一些示例代码：

文本类型

首先，我们导入必要的验证器：

import { RequiredValidator, EmailValidator, MinLengthValidator, MaxLengthValidator } from 'ng5-validation';

必填

<input type="text" [(ngModel)]="text" required />
<div *ngIf="!text">请输入文本</div>

或者使用 ng5-validation 提供的 RequiredValidator：

<input type="text" [(ngModel)]="text" [validateRequired]="true" />
<div *ngIf="!text || text.length === 0">请输入文本</div>

邮箱

<input type="text" [(ngModel)]="email" />
<div *ngIf="email && !email.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)">请输入正确的邮箱格式</div>

或者使用 ng5-validation 提供的 EmailValidator：

<input type="text" [(ngModel)]="email" [validateEmail]="true" />
<div *ngIf="email && !emailValidator(email)">请输入正确的邮箱格式</div>

emailValidator(email: string) {
  return new EmailValidator().validate(email);
}

最小长度

<input type="text" [(ngModel)]="text" />
<div *ngIf="!text || text.length < 5">文本长度最少为 5 个字符</div>

或者使用 ng5-validation 提供的 MinLengthValidator：

<input type="text" [(ngModel)]="text" [validateMinLength]="5" />
<div *ngIf="text && !minLengthValidator(text)">文本长度最少为 5 个字符</div>

minLengthValidator(value: string | number | any[]) {
  return new MinLengthValidator(5).validate(value);
}

最大长度

<input type="text" [(ngModel)]="text" />
<div *ngIf="!text || text.length > 10">文本长度最多为 10 个字符</div>

或者使用 ng5-validation 提供的 MaxLengthValidator：

<input type="text" [(ngModel)]="text" [validateMaxLength]="10" />
<div *ngIf="text && !maxLengthValidator(text)">文本长度最多为 10 个字符</div>

maxLengthValidator(value: string | number | any[]) {
  return new MaxLengthValidator(10).validate(value);
}

数字类型

接下来让我们来看看数字类型的验证器：

import { RequiredValidator, MinValidator, MaxValidator, MinLengthValidator, MaxLengthValidator } from 'ng5-validation';

必填

<input type="text" [(ngModel)]="number" required />
<div *ngIf="!number">请输入数字</div>

或者使用 ng5-validation 提供的 RequiredValidator：

<input type="text" [(ngModel)]="number" required [validateRequired]="true" />
<div *ngIf="!number || number.length === 0">请输入数字</div>

最小值

<input type="number" [(ngModel)]="number" />
<div *ngIf="number && number < 5">数字最小为 5</div>

或者使用 ng5-validation 提供的 MinValidator：

<input type="number" [(ngModel)]="number" [validateMin]="5" />
<div *ngIf="number && !minValidator(number)">数字最小为 5</div>

minValidator(value: string | number) {
  return new MinValidator(5).validate(value);
}

最大值

<input type="number" [(ngModel)]="number" />
<div *ngIf="number && number > 10">数字最大为 10</div>

或者使用 ng5-validation 提供的 MaxValidator：

<input type="number" [(ngModel)]="number" [validateMax]="10" />
<div *ngIf="number && !maxValidator(number)">数字最大为 10</div>

maxValidator(value: string | number) {
  return new MaxValidator(10).validate(value);
}

总结

以上就是 ng5-validation 的详细使用教程，通过本文的示例代码，相信您已经可以轻松地应用 ng5-validation 来实现表单验证了。至于更加复杂的场景，ng5-validation 也提供了更多的验证器，您可以通过阅读官方文档来了解更多细节。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be481e8991b448e5991