Zod验证库初学习

最新推荐文章于 2024-12-16 15:23:31 发布

薯条多多1005

最新推荐文章于 2024-12-16 15:23:31 发布

阅读量544

点赞数 4

文章标签： vue.js typescript 前端

本文链接：https://blog.csdn.net/2302_80244686/article/details/144338713

版权

文章目录

学习总结
- Zod验证库
本周计划

学习总结

在此次项目中有多处向后端提交数据判空和判断格式的处理，一开始不太知道该怎么去简洁的判断，还有些用了正则表达式，学长推荐了两种方法，其中一种就是zod库，进行了一个粗略的学习

Zod验证库

zod是一个强大的运行时验证库，ts专属，通过定义模块来验证和解析数据，同时生成ts类型，轻量直观，功能非常强大几乎适用于所有判断

zod的安装和引入

安装非常简单
npm install zod
yarn add zod
引入

import { z } from "zod"

import * as z from "zod"

zod的基本用法

定义数据模式

// 定义
const strSchema = z.string();
const numSchema = z.number();

// 使用验证
strSchema.parse("hello");
numSchema.parse(123);

定义对象模式
定义对象类型，还可以进行判空处理

const loginSchema = z.object({
  account: z
    .string()
    .min(1, { message: '请输入账号' }),
  password: z
    .string()
    .min(1, { message: '请输入密码' })
})

const loginData = { account: "123456789", password: '123456' }
loginSchema.parse(loginData)
// 注意：不可以直接写loginSchema.parse({ account: "123456789", password: '123456' })

数组模式
验证数组中的数据类型

const arraySchema = z.array(z.number())

arraySchema.parse([1,2,3])

高级功能

自定义验证规则
使用 refine 方法

const postSchema = z.string().refine((val) => val.length >= 8, {
  message: "密码长度必须至少为 8 个字符",
});

可选字段
使用optional

const userSchema = z.object({
  name: z.string(),
  age: z.number().optional(), // 年龄是可选的，可写可不写
});

默认值
使用default方法设置字段的默认值

const userSchema = z.object({
  name: z.string(),
  age: z.number().default(18), // 设置默认年龄为18
});

zod与ts结合

zod的模式定义可直接推导出ts类型，避免重复定义结构

const userSchema = z.object({
  name: z.string(),
  age: z.number(),
});

type User = z.infer<typeof userSchema>;

const user: User = { name: "Tom", age: 25 };

总结

还有一些其他的用法暂时还没有用到，学习了这个库接下来要在项目中实践应用一下，遇到问题在及时补充

本周计划

今天已经周一，本周是第十五周，马上就要考试了，需要开始复习专业课知识，这个学期专业课非常多，也很难，不想要挂科，从这周开始真的要开始好好复习了，同时小组的面试也在进行中，需要复习一下之前的知识，vue虽然学了也用了，但是总感觉不知道学了啥用了啥还是需要在好好复习复习，项目也得抓起来，样式和使用都有很多问题需要修改。