class-validator中文教程

官方文档:

https://www.npmjs.com/package/class-validator

在这里插入图片描述

class-validator可以说是一个简化验证的依赖库 (采用注释的方式进行校验)

但是缺少中文文档和过程,以自己的理解和对官网文档的阅读进行整理输出。

它的好兄弟class-transformer

class-validator官方提供的方式还不能直接对一个请求的返回值进行校验,它要求必须要是类的一个对象,所以需要做一些处理。
可以将一个json转成指定的类的对象

import { Type, plainToClass } from 'class-transformer';
//plainToClass   json转class
//type  指定隐式类型   
let users = plainToClass(User, userJson); 

1.引入

import {
  validate,
  validateOrReject,
  Contains,
  IsInt,
  Length,
  IsEmail,
  IsFQDN,
  IsDate,
  Min,
  Max,
} from 'class-validator';   //引入

2.输出类

export class Post {
  @Length(10, 20)
  title: string;

  @Contains('hello')
  text: string;

  @IsInt()
  @Min(0)
  @Max(10)
  rating: number;

  @IsEmail()
  email: string;

  @IsFQDN()
  site: string;

  @IsDate()
  createDate: Date;
}                  //导出类

3.声明类并调用类中的方法进行校验

let post = new Post();           //声明一个post
post.title = 'Hello'; // 不通过
post.text = 'this is a great post about hell world'; // 不通过
post.rating = 11; // 不通过
post.email = 'google.com'; // 不通过
post.site = 'googlecom'; // 不通过

4.验证监听

validate(post).then(errors => {
  // errors is an array of validation errors
  if (errors.length > 0) {
    console.log('validation failed. errors: ', errors);
  } else {
    console.log('validation succeed');
  }
});

5.错误输出

此方法返回一个validationError 对象 每一项如下

{
    target: Object; // 已经验证的对象.
    property: string; // 未通过验证的对象属性.
    value: any; // 未通过验证的值.
    constraints?: { // 验证失败并带有错误消息.
        [type: string]: string;
    };
    children?: ValidationError[]; // Contains all nested validation errors of the property
}

6.消息

在装饰器下提示指定信息

import { MinLength, MaxLength } from 'class-validator';

export class Post {
  @MinLength(10, {
    message: 'Title is too short',
  })
  @MaxLength(50, {
    message: 'Title is too long',
  })
  title: string;
}

在消息中可以使用特殊的$符号

$value - 正在验证的值
$property - 要验证的对象属性的名称
$target - 要验证的对象的类的名称
$constraint1, $constraint2, ... $constraintN - 由特定验证类型定义的约束

举个栗子 》》》》》》》》》

import { MinLength, MaxLength } from 'class-validator';

export class Post {
  @MinLength(10, {
    // here, $constraint1 会被替换为最小长度 "10",  $value 会被替换为换取的值
    message: 'Title is too short. Minimal length is $constraint1 characters, but actual is $value',
  })
  @MaxLength(50, {
    // here, $constraint1 will be replaced with "50", and $value with actual supplied value
    message: 'Title is too long. Maximal length is $constraint1 characters, but actual is $value',
  })
  title: string;
}

7.检验数组的方法

import { MinLength, MaxLength } from 'class-validator';

export class Post {
  @MaxLength(20, {
    each: true,                   //每项验证
  })
  tags: string[];
}

这将验证post.tags数组中的每个项目。

validate函数可以选择一个validatorOptions 作为第二个参数

export interface ValidatorOptions {
  skipMissingProperties?: boolean;
  whitelist?: boolean;
  forbidNonWhitelisted?: boolean;
  groups?: string[];
  dismissDefaultMessages?: boolean;
  validationError?: {
    target?: boolean;
    value?: boolean;
  };

  forbidUnknownValues?: boolean;           //建议设置为true  防止未知对象通过验证
  stopAtFirstError?: boolean;
}
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
Vue是一种用于构建用户界面的渐进式JavaScript框架,而vue-validator是一个为Vue.js提供数据验证的插件。 vue-validator允许我们在Vue组件中定义验证规则,以确保用户输入的数据符合预期。它提供了一种简洁和灵活的方式来处理表单验证,可以方便地与Vue的数据绑定机制结合使用。 使用vue-validator,我们可以定义验证规则并将其应用于表单输入控件。它支持多种验证规则,如必填、最大长度、最小长度、正则表达式等。我们可以根据需要选择适当的规则,并将其应用于表单控件的v-model指令上。 验证结果可以以不同的方式呈现给用户。vue-validator提供了多种内置的验证指令,如v-validate、v-minLength、v-maxLength等,我们可以将这些指令应用于表单输入控件上,以显示验证结果。此外,我们还可以自定义验证指令,以满足具体项目的需求。 除了基本的验证功能,vue-validator还提供了一些高级功能。比如,它可以在异步验证过程中显示加载状态,并根据后端返回的验证结果更新界面。此外,它还支持字段间的依赖验证,即一个字段的验证结果依赖于其他字段的值。 总之,vue-validator是一个非常有用的插件,使得表单验证变得简单和灵活。它与Vue.js良好地集成,提供了丰富的验证规则和灵活的验证指令,可满足各种验证需求。无论是简单的表单验证还是复杂的数据验证,vue-validator都可以帮助我们轻松地实现。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yoo前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值