npm install zod
# 或 yarn/pnpm
pnpm add zod

// src/utils/validate.ts
import { z } from 'zod';

// 1. 定義校驗(yàn)規(guī)則（Schema）
const UserSchema = z.object({
  // 必選字符串，非空
  username: z.string().min(2, '用戶名至少2個(gè)字符').max(20),
  // 可選數(shù)字，大于0
  age: z.number().optional().positive('年齡必須為正數(shù)'),
  // 郵箱格式校驗(yàn)
  email: z.string().email('請(qǐng)輸入正確的郵箱格式'),
  // 枚舉值限制
  role: z.enum(['admin', 'user', 'guest'], '角色只能是admin/user/guest'),
  // 嵌套對(duì)象
  address: z.object({
    city: z.string(),
    street: z.string().optional()
  })
});

// 2. 提取 TS 類型（無需手動(dòng)寫 interface）
type User = z.infer<typeof UserSchema>;

// 3. 校驗(yàn)數(shù)據(jù)
function validateUser(data: unknown) {
  try {
    // 嚴(yán)格校驗(yàn)：不符合規(guī)則會(huì)拋錯(cuò)
    const validData = UserSchema.parse(data);
    console.log('校驗(yàn)通過', validData);
    return { success: true, data: validData };
  } catch (error) {
    // 捕獲錯(cuò)誤并格式化
    if (error instanceof z.ZodError) {
      const errMsg = error.errors.map(item => ({
        field: item.path.join('.'), // 錯(cuò)誤字段（如 address.city）
        message: item.message       // 錯(cuò)誤提示
      }));
      return { success: false, errors: errMsg };
    }
    return { success: false, errors: [{ field: 'unknown', message: '未知錯(cuò)誤' }] };
  }
}

// 測(cè)試：校驗(yàn)合法數(shù)據(jù)
const validUser = {
  username: '張三',
  email: 'zhangsan@test.com',
  role: 'user',
  address: { city: '北京' }
};
console.log(validateUser(validUser)); // success: true

// 測(cè)試：校驗(yàn)非法數(shù)據(jù)
const invalidUser = {
  username: '張', // 長(zhǎng)度不足
  email: '123',   // 郵箱格式錯(cuò)誤
  role: 'super',  // 枚舉值錯(cuò)誤
  address: { city: 123 } // 類型錯(cuò)誤
};
console.log(validateUser(invalidUser)); 
// success: false，errors 包含所有錯(cuò)誤字段和提示

<!-- src/components/LoginForm.vue -->
<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.email" placeholder="郵箱" />
    <div v-if="errors.email">{{ errors.email }}</div>
    
    <input v-model="form.password" placeholder="密碼" />
    <div v-if="errors.password">{{ errors.password }}</div>
    
    <button type="submit">提交</button>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { z } from 'zod';

// 定義表單校驗(yàn)規(guī)則
const LoginSchema = z.object({
  email: z.string().email('請(qǐng)輸入正確的郵箱'),
  password: z.string().min(6, '密碼至少6位')
});
type LoginForm = z.infer<typeof LoginSchema>;

// 表單數(shù)據(jù)
const form = ref<LoginForm>({ email: '', password: '' });
const errors = ref<Record<string, string>>({});

// 提交表單
const submitForm = () => {
  // 清空之前的錯(cuò)誤
  errors.value = {};
  
  // 校驗(yàn)數(shù)據(jù)（safeParse 不拋錯(cuò)，返回結(jié)果）
  const result = LoginSchema.safeParse(form.value);
  if (!result.success) {
    // 格式化錯(cuò)誤信息
    result.error.errors.forEach(item => {
      errors.value[item.path[0]] = item.message;
    });
    return;
  }
  
  // 校驗(yàn)通過，調(diào)用接口
  console.log('表單數(shù)據(jù)合法', result.data);
};
</script>

// src/api/user.ts
import { z } from 'zod';
import axios from 'axios';

// 定義 API 響應(yīng)規(guī)則
const UserListSchema = z.array(
  z.object({
    id: z.number(),
    name: z.string(),
    avatar: z.string().url().optional() // 可選URL
  })
);

// 請(qǐng)求接口并校驗(yàn)響應(yīng)
async function getUserList() {
  const res = await axios.get('/api/users');
  // 校驗(yàn)響應(yīng)數(shù)據(jù)，確保符合預(yù)期
  const validData = UserListSchema.parse(res.data);
  return validData;
}

// src/utils/env.ts
import { z } from 'zod';

// 定義環(huán)境變量規(guī)則
const EnvSchema = z.object({
  VITE_API_BASE: z.string().url('API地址必須是合法URL'),
  VITE_GA_ID: z.string().optional()
});

// 校驗(yàn) Vite 環(huán)境變量
const env = EnvSchema.parse(import.meta.env);
// 導(dǎo)出類型安全的環(huán)境變量
export default env;