Utils 工具函数

提供一套完整的工具函数集合，包括数据验证、格式化、存储操作、网络请求等常用功能。

🎮 在线演示

想要查看工具函数的使用效果？请访问在线演示查看功能演示

特性

✅ 数据验证

完整的表单验证规则集合

🎨 数据格式化

常用的数据格式化工具

💾 存储操作

本地存储和会话存储工具

🌐 网络请求

封装的HTTP请求工具

数据验证

验证规则模式

内置常用的正则表达式模式：

查看代码

import { patterns } from 'imtes-ui'

// 邮箱验证
console.log(patterns.email.test('user@example.com')) // true

// 手机号验证
console.log(patterns.phone.test('13800138000')) // true

// 身份证验证
console.log(patterns.idCard.test('110101199001011234')) // true

// 密码强度验证
console.log(patterns.password.test('MyPassword123')) // true

// 中文姓名验证
console.log(patterns.chineseName.test('张三')) // true

// URL验证
console.log(patterns.url.test('https://www.example.com')) // true

// IP地址验证
console.log(patterns.ip.test('192.168.1.1')) // true

// 银行卡号验证
console.log(patterns.bankCard.test('6222021234567890123')) // true

// 车牌号验证
console.log(patterns.carNumber.test('京A12345')) // true

// 社会统一信用代码验证
console.log(patterns.creditCode.test('91110000MA001234X1')) // true

验证器函数

基于 Element Plus 的验证器函数：

查看代码

vue

<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email" />
    </el-form-item>
    
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="form.phone" />
    </el-form-item>
    
    <el-form-item label="身份证号" prop="idCard">
      <el-input v-model="form.idCard" />
    </el-form-item>
    
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    
    <el-form-item label="中文姓名" prop="chineseName">
      <el-input v-model="form.chineseName" />
    </el-form-item>
    
    <el-form-item label="网址" prop="url">
      <el-input v-model="form.url" />
    </el-form-item>
    
    <el-form-item label="年龄" prop="age">
      <el-input-number v-model="form.age" />
    </el-form-item>
    
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { validators } from 'imtes-ui'

const formRef = ref()

const form = reactive({
  email: '',
  phone: '',
  idCard: '',
  password: '',
  chineseName: '',
  url: '',
  age: null,
  username: ''
})

const rules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { validator: validators.email, trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: validators.phone, trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { validator: validators.idCard, trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: validators.password, trigger: 'blur' }
  ],
  chineseName: [
    { required: true, message: '请输入中文姓名', trigger: 'blur' },
    { validator: validators.chineseName, trigger: 'blur' }
  ],
  url: [
    { validator: validators.url, trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { validator: validators.range(1, 120), trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { validator: validators.length(3, 20), trigger: 'blur' }
  ]
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    console.log('表单验证通过:', form)
  } catch (error) {
    console.log('表单验证失败:', error)
  }
}

const handleReset = () => {
  formRef.value.resetFields()
}
</script>

预设验证规则

常用的验证规则组合：

查看代码

import { rules } from 'imtes-ui'

// 使用预设规则
const formRules = {
  // 必填项
  name: rules.required,
  
  // 邮箱规则（必填 + 格式验证）
  email: rules.email,
  
  // 手机号规则（必填 + 格式验证）
  phone: rules.phone,
  
  // 密码规则（必填 + 强度验证）
  password: rules.password,
  
  // 中文姓名规则（必填 + 格式验证）
  chineseName: rules.chineseName,
  
  // URL规则（可选 + 格式验证）
  website: rules.url,
  
  // 身份证规则（必填 + 格式验证）
  idCard: rules.idCard,
  
  // 银行卡规则（可选 + 格式验证）
  bankCard: rules.bankCard,
  
  // 数字规则（必填 + 数字验证）
  amount: rules.number
}

自定义验证规则

创建自定义验证规则：

查看代码

import { createRule, createLengthRule, createRangeRule } from 'imtes-ui'

// 创建基础规则
const customRule = createRule(
  true,                    // 是否必填
  /^[A-Z]\d{8}$/,         // 正则模式
  '请输入正确的编号格式',   // 错误信息
  'blur'                   // 触发方式
)

// 创建长度规则
const usernameRule = createLengthRule(
  true,                    // 是否必填
  3,                       // 最小长度
  20,                      // 最大长度
  'blur'                   // 触发方式
)

// 创建数值范围规则
const ageRule = createRangeRule(
  true,                    // 是否必填
  18,                      // 最小值
  65,                      // 最大值
  'blur'                   // 触发方式
)

// 在表单中使用
const rules = {
  code: customRule,
  username: usernameRule,
  age: ageRule
}

数据格式化

基础格式化

常用的数据格式化函数：

查看代码

import { formatDate, formatNumber, formatFileSize, validate } from 'imtes-ui'

// 日期格式化
console.log(formatDate(new Date(), 'YYYY-MM-DD')) // '2024-01-15'
console.log(formatDate(new Date(), 'YYYY年MM月DD日')) // '2024年01月15日'
console.log(formatDate('2024-01-15', 'MM/DD/YYYY')) // '01/15/2024'

// 数字格式化
console.log(formatNumber(1234.567, 2)) // '1,234.57'
console.log(formatNumber(1000, 0, '元')) // '1,000元'
console.log(formatNumber(0.15, 2)) // '0.15'

// 文件大小格式化
console.log(formatFileSize(1024)) // '1.0KB'
console.log(formatFileSize(1048576)) // '1.0MB'
console.log(formatFileSize(1073741824)) // '1.0GB'

// 验证函数
console.log(validate.email('user@example.com')) // true
console.log(validate.phone('13800138000')) // true
console.log(validate.idCard('110101199001011234')) // true
console.log(validate.url('https://www.example.com')) // true
console.log(validate.custom(/^\d{6}$/, '123456')) // true

存储操作

LocalStorage 工具

带过期时间的本地存储：

查看代码

import { storage } from 'imtes-ui'

// 设置数据（永久存储）
storage.set('user_info', { 
  name: '张三', 
  email: 'zhang@example.com' 
})

// 设置数据（带过期时间，3600秒后过期）
storage.set('temp_token', 'abc123', 3600)

// 获取数据
const userInfo = storage.get('user_info')
console.log(userInfo) // { name: '张三', email: 'zhang@example.com' }

const token = storage.get('temp_token')
console.log(token) // 'abc123' 或 null（如果已过期）

// 删除数据
storage.remove('temp_token')

// 清空所有数据
storage.clear()

Cookie 操作工具：

查看代码

import { cookie } from 'imtes-ui'

// 设置 Cookie
cookie.set('session_id', 'xyz789')

// 设置带选项的 Cookie
cookie.set('user_preference', { theme: 'dark' }, {
  expires: 7,        // 7天后过期
  path: '/',         // 路径
  domain: '.example.com',  // 域名
  secure: true,      // 仅 HTTPS
  sameSite: 'strict' // SameSite 策略
})

// 获取 Cookie
const sessionId = cookie.get('session_id')
console.log(sessionId) // 'xyz789'

// 删除 Cookie
cookie.remove('session_id')

// 删除带选项的 Cookie
cookie.remove('user_preference', { 
  path: '/', 
  domain: '.example.com' 
})

网络请求

HTTP 客户端

封装的 HTTP 请求工具：

查看代码

import { http } from 'imtes-ui'

// 配置拦截器
http.use(
  // 请求拦截器
  (config) => {
    // 添加认证头
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  // 响应拦截器 - 成功
  (response) => {
    return response.data
  },
  // 响应拦截器 - 错误
  (error) => {
    console.error('请求失败:', error)
    return Promise.reject(error)
  }
)

// GET 请求
const getUserList = async () => {
  try {
    const users = await http.get('/api/users', { page: 1, size: 10 })
    console.log('用户列表:', users)
  } catch (error) {
    console.error('获取用户列表失败:', error)
  }
}

// POST 请求
const createUser = async (userData) => {
  try {
    const result = await http.post('/api/users', userData)
    console.log('创建用户成功:', result)
  } catch (error) {
    console.error('创建用户失败:', error)
  }
}

// PUT 请求
const updateUser = async (id, userData) => {
  try {
    const result = await http.put(`/api/users/${id}`, userData)
    console.log('更新用户成功:', result)
  } catch (error) {
    console.error('更新用户失败:', error)
  }
}

// DELETE 请求
const deleteUser = async (id) => {
  try {
    await http.delete(`/api/users/${id}`)
    console.log('删除用户成功')
  } catch (error) {
    console.error('删除用户失败:', error)
  }
}

常用工具函数

防抖和节流

函数防抖和节流工具：

查看代码

import { debounce, throttle } from 'imtes-ui'

// 防抖函数
const debouncedSearch = debounce((query) => {
  console.log('搜索:', query)
  // 执行搜索逻辑
}, 300)

// 在输入事件中使用
const handleInput = (event) => {
  debouncedSearch(event.target.value)
}

// 节流函数
const throttledScroll = throttle(() => {
  console.log('滚动事件')
  // 执行滚动逻辑
}, 100)

// 在滚动事件中使用
window.addEventListener('scroll', throttledScroll)

深拷贝

深度克隆对象：

查看代码

import { deepClone } from 'imtes-ui'

const originalData = {
  name: '张三',
  details: {
    age: 25,
    hobbies: ['读书', '运动'],
    address: {
      city: '北京',
      district: '朝阳区'
    }
  }
}

// 深拷贝
const clonedData = deepClone(originalData)

// 修改克隆的数据不会影响原数据
clonedData.details.age = 26
clonedData.details.hobbies.push('旅游')

console.log(originalData.details.age) // 25 (不变)
console.log(clonedData.details.age) // 26

唯一ID生成

生成唯一标识符：

查看代码

import { generateUniqueId } from 'imtes-ui'

// 生成唯一ID
const id1 = generateUniqueId()
const id2 = generateUniqueId()

console.log(id1) // 例如: '1704960000000_1'
console.log(id2) // 例如: '1704960000000_2'

// 使用场景
const addListItem = () => {
  const newItem = {
    id: generateUniqueId(),
    name: '新项目',
    createdAt: new Date()
  }
  list.value.push(newItem)
}

API 参考

验证相关

// 正则模式
import { patterns } from 'imtes-ui'

// 验证器函数
import { validators } from 'imtes-ui'

// 预设规则
import { rules } from 'imtes-ui'

// 自定义规则创建
import { createRule, createLengthRule, createRangeRule } from 'imtes-ui'

格式化相关

// 格式化函数
import { 
  formatDate, 
  formatNumber, 
  formatFileSize, 
  validate 
} from 'imtes-ui'

存储相关

// 存储工具
import { storage, cookie } from 'imtes-ui'

网络相关

// HTTP 客户端
import { http } from 'imtes-ui'

工具函数

// 常用工具
import { 
  debounce, 
  throttle, 
  deepClone, 
  generateUniqueId 
} from 'imtes-ui'

最佳实践

验证规则：根据业务需求选择合适的验证规则，避免过度验证
数据格式化：统一使用格式化函数，保持数据展示的一致性
存储管理：合理设置过期时间，及时清理无用数据
网络请求：统一配置拦截器，处理认证和错误
性能优化：合理使用防抖和节流，避免频繁操作

Utils 工具函数 ​

特性 ​

✅ 数据验证

🎨 数据格式化

💾 存储操作

🌐 网络请求

数据验证 ​

验证规则模式 ​

验证器函数 ​

预设验证规则 ​

自定义验证规则 ​

数据格式化 ​

基础格式化 ​

存储操作 ​

LocalStorage 工具 ​

Cookie 工具 ​

网络请求 ​

HTTP 客户端 ​

常用工具函数 ​

防抖和节流 ​

深拷贝 ​

唯一ID生成 ​

API 参考 ​

验证相关 ​

格式化相关 ​

存储相关 ​

网络相关 ​

工具函数 ​

最佳实践 ​

Utils 工具函数

特性

数据验证

验证规则模式

验证器函数

预设验证规则

自定义验证规则

数据格式化

基础格式化

存储操作

LocalStorage 工具

Cookie 工具

网络请求

HTTP 客户端

常用工具函数

防抖和节流

深拷贝

唯一ID生成

API 参考

验证相关

格式化相关

存储相关

网络相关

工具函数

最佳实践