【开源推荐】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 空降

相关推荐
贫民窟的勇敢爷们20 分钟前
React跨平台能力,打破前端开发的平台边界
前端·react.js·前端框架
魔都吴所谓30 分钟前
【开源LiteReport】告别 JDK 依赖 -- 用 LiteReport 为 pytest 项目打造轻量级测试报告
开源·pytest
RustCoder41 分钟前
MangoFetch:一个用 Rust 写的 CLI/TUI 高性能的下载工具
后端·rust·开源
lifejump1 小时前
Dede(织梦)CMS渗透测试(all)
前端·网络·安全·web安全
扬帆破浪1 小时前
sidecar崩溃后前端怎么续命 重启策略与状态保留
前端·人工智能·架构·开源·知识图谱
光影少年1 小时前
前端算法题
前端·javascript·算法
Lee川1 小时前
从输入框到智能匹配:一文读懂搜索功能的完整实现
前端·后端
朝阳392 小时前
React【面试】
前端·react.js·面试
漓漾li2 小时前
每日面试题(2026-05-15)- 前端
前端·vue.js·react.js
进击切图仔2 小时前
RAG 加载 pdf 文档
linux·前端·pdf