表单提交验证新实践之class-validator

谁践踏了优雅 2022-10-23 09:57 246阅读 0赞

#### class-validator实践篇 ####

之前有一篇关于class-validator的基础的介绍，这篇来一下如何实践:

首先介绍一下业务背景：简单来说就是一个表单提交 ，根据类型的选择进行四种提交模式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

首先我们在ts文件中预设好四种类型的提交模板：预设四种 仅以一种为例  
**feesModal.ts**

export const feesAddInfo1 = { 
        fees: { 
            //订单详情Id
            workOrderDetailId:"",
            //费用类型
            feeType: 1,
            //费用金额
            amount: 0,
            //费用用途
            purpose: "",
            //费用原因
            reason: "",
            //有无发票
            isInvoice: 1,
            //借款单号
            loanNo :"",
            //核销单号
            verificationNo:"",
            //费用申请人ID
            applicantId: "",
            //付款时间
            payTime: "",
            //客户是否回款
            isCustomerMoneyReturned: 1,
            //我方是否开票
            isReceiptIssued: 1,
            //税点承担方
            taxPointUndertaker: 1
        }
    };

对预设模板进行JSON.parse(JSON.stringify(feesAddInfo1))的处理

> JSON.parse() 方法将数据转换为 JavaScript 对象  
> JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串

**record.component.ts**

feeTypeChange() { 
        switch (this.feeType) { 
          case "1":
            this.feeAddInfo = JSON.parse(JSON.stringify(feesAddInfo1));
            //1
            break;
          case "2":
            this.feeAddInfo = JSON.parse(JSON.stringify(feesAddInfo2));
            //2
            break;
          case "3":
            //3
            this.feeAddInfo = JSON.parse(JSON.stringify(feesAddInfo3));
            break;
          case "4":
            //4
            this.feeAddInfo = JSON.parse(JSON.stringify(feesAddInfo4));
            break;
        }
      }

#### 引入依赖 ####

import {  validate } from 'class-validator'
    import {  plainToClass } from 'class-transformer';

以上提到了我们提供四种模板的提交，自然四种模板对于字段的验证各不相同，基于四种模板的设计，在验证部分也会组合四种验证方式。  
**record.component.ts**

switch (this.feeType) { 
          case "1":
            this.feeAddInfo.fees.applicantId = this.needApplicantId;//每种验证的前可以进行特殊处理
            var endFeeAddvalidator1 = new FeeAddvalidator1();
            endFeeAddvalidator1 = plainToClass(FeeAddvalidator1, this.feeAddInfo.fees);
            break;
          case "2":
            var endFeeAddvalidator2 = new FeeAddvalidator2();
            endFeeAddvalidator2 = plainToClass(FeeAddvalidator2, this.feeAddInfo.fees);
            break;
          case "3":
            var endFeeAddvalidator3 = new FeeAddvalidator3();
            endFeeAddvalidator3 = plainToClass(FeeAddvalidator3, this.feeAddInfo.fees);
            break;
          case "4":
            var endFeeAddvalidator3 = new FeeAddvalidator3();
            endFeeAddvalidator3 = plainToClass(FeeAddvalidator3, this.feeAddInfo.fees);
            break;
        }

> class-validator官方提供的方式还不能直接对一个请求的返回值进行校验，它要求必须要是类的一个对象，所以需要做一些处理。  
> 可以将一个json转成指定的类的对象  
> plainToClass  
> json转class  
> 经过处理后的 endFeeAddvalidator1就可以符合class-v的验证数据要求了

**feesAddInfo.ts**

#### class-validator 的验证类 ####

import {  IsNotEmpty } from 'class-validator';   //引入class-validator中的验证方法
    
    export class FeeAddvalidator2 { 
        //订单详情Id
        @IsNotEmpty({  message: '订单详情Id不能为空' })
        workOrderDetailId: string;
        //费用类型
        @IsNotEmpty({  message: '费用类型不能为空' })
        feeType: number;
        //费用金额
        @IsNotEmpty({  message: '费用金额不能为空' })
        amount: number;
        //收款时间
        @IsNotEmpty({  message: '收款时间不能为空' })
        receiveTime:string;
        //收款账户
        @IsNotEmpty({  message: '收款时间不能为空' })
        receiveAccount:string;
    }

#### 进入validate方法进行验证: ####

validate(this.feeType == '1' ? endFeeAddvalidator1 : this.feeType == '2' ? endFeeAddvalidator2 : endFeeAddvalidator3).then(errors => { 
          // errors is an array of validation errors
          if (errors.length > 0) { 
            console.log('validation failed. errors: ', errors);
            this.log.error('信息填写有误详情查看errors')
          } else { 
          //验证通过 ，提交
            console.log('validation succeed');
            this.workOrderService.xxx(this.feeAddInfo)   //提交接口
              .finally(() => (this.saving = false))
              .subscribe(
                () => { 
                  this.log.info("记录成功!");
                },
                (error) => { 
                  this.log.error("记录失败", `${ error}`);
                }
              );
          }
        });

#### Error example: ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]  
当然可以把error中的数据进行分条输出，以达到准确提示。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20221023/1e882631170a4c62992eee9391096579.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: /images/20221023/b2ca7e146e714523866476f768cfe8c8.png