【开源推荐】form-validator-cn 轻量级中文表单校验库 | TS 零依赖、极简开箱即用
文章目录
- [【开源推荐】form-validator-cn 轻量级中文表单校验库 | TS 零依赖、极简开箱即用](#【开源推荐】form-validator-cn 轻量级中文表单校验库 | TS 零依赖、极简开箱即用)
一、项目介绍
日常前端开发中,表单校验是高频刚需场景。
市面上很多校验库如 Zod、Yup 体积大、配置繁琐,很多项目只需要手机号、邮箱、身份证、必填、密码等中文业务常用规则,完全不需要重型方案。
今天给大家推荐一款自己开源开发的 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
二、核心特性
- 🚀 超轻量打包,极致体积,不增加项目负担
- 💎 TypeScript 全量编写,完善类型声明
- 📦 零依赖,开箱即用,无需额外安装依赖
- 📝 内置国内常用校验规则:
- 必填项校验
- 中国大陆手机号
- 常规邮箱格式
- 15/18位身份证
- 密码长度校验
- 🔧 支持单字段校验 + 整表批量校验
- 🧩 模块化架构,方便后续新增自定义规则
三、快速安装
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位手机号 |
| 通用邮箱格式校验 | |
| idCard | 15/18位身份证号码 |
| password | 密码最少6位校验 |
六、两种校验API
-
validate(整表批量校验)
自动遍历表单所有字段,统一收集错误信息,适合提交表单整体校验。
校验通过返回
null,失败返回{字段: 错误文案}对象。 -
validateField(单个字段校验)
单独校验某一个表单项,适合输入框失去焦点、实时校验场景。
七、项目工程化设计
本项目采用标准前端模块化架构开发:
src/rules统一管理所有校验规则,拆分解耦types.ts统一管理 TS 类型,保证类型安全- 统一入口导出,规范代码分层
- 使用
tsup打包,输出 cjs / 类型声明文件 - Github + NPM 版本同步迭代,长期维护
结构清晰,非常适合新手学习 TS 开源库开发、打包、发包全流程。
八、适用场景
- 中小型前后端分离项目
- Vue / React / 原生 JS 所有前端项目
- 后台管理系统登录、注册、信息编辑表单
- H5 移动端、微信小程序表单校验
- 不想引入重型校验库的轻量化项目
九、总结
form-validator-cn 主打够用、轻量、简单、中文本土化 ,
抛弃冗余复杂的配置,5 行代码即可完成完整表单校验,
日常 90% 国内业务表单场景完全覆盖。
如果你正在寻找一款零依赖、小巧好用、纯中文提示 的表单校验工具,
不妨试试这款开源库,也欢迎 Star、提 Issue、扩展更多校验规则!