【开源推荐】form-validator-cn 轻量级中文表单校验库 | TS 零依赖、极简开箱即用

【开源推荐】form-validator-cn 轻量级中文表单校验库 | TS 零依赖、极简开箱即用

文章目录

一、项目介绍

日常前端开发中,表单校验是高频刚需场景。

市面上很多校验库如 ZodYup 体积大、配置繁琐,很多项目只需要手机号、邮箱、身份证、必填、密码等中文业务常用规则,完全不需要重型方案。

今天给大家推荐一款自己开源开发的 form-validator-cn

轻量极简 :压缩后仅 1.3KB

零外部依赖 :原生 TS 编写,无第三方库

中文友好 :内置中文错误提示,贴合国内业务

完整 TS 类型 :类型安全,代码智能提示

模块化设计 :结构清晰,易于扩展、二次开发

跨框架通用:支持原生JS / Vue / React / 小程序

适合:后台管理系统、H5、移动端、简单项目快速落地表单校验。

开源地址:https://github.com/dxiangwiki/form-validator-cn

NPM 地址:https://www.npmjs.com/package/form-validator-cn

二、核心特性

  1. 🚀 超轻量打包,极致体积,不增加项目负担
  2. 💎 TypeScript 全量编写,完善类型声明
  3. 📦 零依赖,开箱即用,无需额外安装依赖
  4. 📝 内置国内常用校验规则:
    • 必填项校验
    • 中国大陆手机号
    • 常规邮箱格式
    • 15/18位身份证
    • 密码长度校验
  5. 🔧 支持单字段校验 + 整表批量校验
  6. 🧩 模块化架构,方便后续新增自定义规则

三、快速安装

npm 安装

bash 复制代码
npm install form-validator-cn

yarn 安装

bash 复制代码
yarn add form-validator-cn

四、快速使用示例

1. 基础使用(CommonJS)

javascript 复制代码
const { validator } = require('form-validator-cn')

// 模拟表单数据
const form = {
  phone: '13812345678',
  email: 'test@example.com',
  idCard: '110101199001011234',
  password: '123456'
}

// 配置校验规则
const errors = validator.validate(form, {
  phone: [validator.required, validator.mobile],
  email: [validator.required, validator.email],
  idCard: [validator.required, validator.idCard],
  password: [validator.required, validator.password]
})

console.log(errors)

2. ESModule / TS 按需引入

typescript 复制代码
import { validator } from 'form-validator-cn'

// 单字段单独校验
const msg = validator.validateField('', [validator.required])
console.log(msg) // 该项为必填项

五、内置全部校验规则

规则 作用
required 非空必填校验
mobile 中国大陆11位手机号
email 通用邮箱格式校验
idCard 15/18位身份证号码
password 密码最少6位校验

六、两种校验API

  1. validate(整表批量校验)

    自动遍历表单所有字段,统一收集错误信息,适合提交表单整体校验。

    校验通过返回 null,失败返回 {字段: 错误文案} 对象。

  2. validateField(单个字段校验)

    单独校验某一个表单项,适合输入框失去焦点、实时校验场景。

七、项目工程化设计

本项目采用标准前端模块化架构开发:

  • src/rules 统一管理所有校验规则,拆分解耦
  • types.ts 统一管理 TS 类型,保证类型安全
  • 统一入口导出,规范代码分层
  • 使用 tsup 打包,输出 cjs / 类型声明文件
  • Github + NPM 版本同步迭代,长期维护

结构清晰,非常适合新手学习 TS 开源库开发、打包、发包全流程

八、适用场景

  • 中小型前后端分离项目
  • Vue / React / 原生 JS 所有前端项目
  • 后台管理系统登录、注册、信息编辑表单
  • H5 移动端、微信小程序表单校验
  • 不想引入重型校验库的轻量化项目

九、总结

form-validator-cn 主打够用、轻量、简单、中文本土化

抛弃冗余复杂的配置,5 行代码即可完成完整表单校验,

日常 90% 国内业务表单场景完全覆盖。

如果你正在寻找一款零依赖、小巧好用、纯中文提示 的表单校验工具,

不妨试试这款开源库,也欢迎 Star、提 Issue、扩展更多校验规则!


开源地址github 空降
NPMnpm 空降

相关推荐
夜焱辰5 小时前
浏览器端 Agent 的文件版本管理:不用 Git,基于 OPFS + SQLite 自己造了一个
前端·人工智能
梦想的颜色5 小时前
TypeScript 完全指南(下):从类型体操到生产级配置
前端·javascript·typescript
Hi~晴天大圣7 小时前
npm使用介绍
前端·npm·node.js
DO_Community7 小时前
DigitalOcean 的 AI 推理路由器是如何构建的
人工智能·开源·agent·claude·deepseek
888CC++8 小时前
如何在 C 语言中进行程序调试?
前端·javascript·算法
喵个咪8 小时前
基于 Taro 的 Headless CMS 多端前端架构:技术解析与二次开发导引
前端·react.js·taro
狂炫冰美式8 小时前
你还在古法PPT吗,试试HTML呢?免费编辑导出工具给 xdm 放这了
前端·后端·github
冬奇Lab8 小时前
每日一个开源项目(第121篇):tiktoken - OpenAI 出品的极速 BPE 分词器
人工智能·开源·openai
万少9 小时前
未来组织的分水岭不是员工数量,而是人才密度
前端·后端·面试
任磊abc9 小时前
nextjs16配置eslint+prettier
前端·eslint·nextjs·prettier