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

相关推荐
zhensherlock1 小时前
Protocol Launcher 系列:Working Copy 提交与同步全攻略
javascript·git·typescript·node.js·自动化·github·js
shjita2 小时前
maven涉及的配置
java·前端·maven
changshuaihua0012 小时前
useState 状态管理
开发语言·前端·javascript·react.js
鹏程十八少2 小时前
6. 2026金三银四 面试官最爱的 Binder:一次拷贝、Activity 启动流程,这篇全搞定
前端·面试·前端框架
坚果的博客2 小时前
开源鸿蒙+RISC-V+星闪:4.28小鸿AI新品于深圳发布,企业共探自主生态新机遇
开源
知识分享小能手2 小时前
ECharts入门学习教程,从入门到精通,综合实战——ECharts数据大屏 - 完整知识点(9)
前端·学习·echarts
是吗乔治2 小时前
vuetify实现excel表格粘贴效果
前端·vue.js·vue·excel
Java后端的Ai之路2 小时前
React 快速入门到精通教程:从零基础到能写项目
前端·react.js·前端框架
是上好佳佳佳呀2 小时前
【前端(九)】CSS Transform 2D/3D 变换笔记:分清两个原点,搞懂多重变换
前端·css·笔记