
we-validator
工具简单灵活的跨平台表单验证插件,支持微信/支付宝/百度/抖音小程序 + 浏览器 + Node.js,零框架依赖,内置常用校验规则(required/mobile/email/length 等),支持自定义规则与错误提示,小程序表单验证场景的事实标准方案
validationformvalidatorminiprogramweappwechatbrowsernodejs
详细文档
资源概述#
we-validator 是一款简单灵活的跨平台表单验证插件,由 ChanceYu 开发维护。它不依赖任何框架,同时支持微信/支付宝/百度/字节跳动小程序、浏览器和 Node.js 环境。在小程序端,错误提示默认使用 wx.showToast,开箱即用。
核心特性#
- 零框架依赖:纯 JavaScript 实现,原生小程序 / mpvue / wepy / taro / uni-app 均可使用
- 内置常用规则:required、mobile、email、length、range、number 等 10+ 开箱即用
- 自定义规则:通过
addRule方法灵活扩展任意验证逻辑 - 自定义错误提示:支持
onMessage回调,可替换默认的showToast为自定义 UI - 动态增删规则:
addRules/removeRules方法支持运行时动态调整验证字段 - 批量校验:一次性校验多个字段,并显示所有错误信息
- 函数校验:
check方法快速验证单个值是否符合指定规则
项目数据#
| 指标 | 数值 |
|---|---|
| GitHub Stars | 237⭐ |
| Forks | 51 |
| npm 版本数 | 46(latest: 2.1.18) |
| npm 最后发布 | 2026-01-13 |
| 许可证 | MIT |
| 创建年份 | 2018 |
设计规范#
API 设计哲学#
we-validator 采用「实例化 + 配置驱动」的设计模式,核心 API 仅 5 个,学习成本极低:
const WeValidator = require('we-validator')
// 1. 创建验证器实例
const validator = new WeValidator({
rules: {
username: { required: true },
phoneno: { required: true, mobile: true },
email: { required: true, email: true }
},
messages: {
username: { required: '请输入用户名' },
phoneno: { required: '请输入手机号', mobile: '手机号格式不正确' },
email: { required: '请输入邮箱', email: '邮箱格式不正确' }
}
})
// 2. 校验数据
validator.checkData({ username: '张三', phoneno: '13800138000', email: 'test@test.com' })
// → true(校验通过)
validator.checkData({ username: '', phoneno: '123', email: 'bad' })
// → false + showToast 提示第一个错误
// 3. 校验单个字段
validator.checkValue('13800138000', 'mobile')
// → true
// 4. 动态添加规则
validator.addRules({
age: { required: true, range: [18, 99] }
}, {
age: { required: '请输入年龄', range: '年龄必须在 18-99 之间' }
})
// 5. 移除规则
validator.removeRules(['age'])
内置验证规则#
| 规则名 | 说明 | 示例 |
|---|---|---|
required | 必填 | required: true |
mobile | 手机号(中国大陆) | mobile: true |
email | 电子邮箱 | email: true |
length | 固定长度 | length: 6 |
range | 长度范围 | range: [6, 20] |
number | 数字 | number: true |
digits | 纯数字(整数) | digits: true |
idcard | 身份证号 | idcard: true |
url | URL 地址 | url: true |
date | 日期格式 | date: true |
审核规范#
不适用(工具库,非平台类资源)
开发指南#
安装#
# npm
npm install we-validator --save
# 或 CDN(浏览器/H5)
# <script src="https://unpkg.com/we-validator/dist/we-validator.min.js"></script>
微信小程序中使用#
// utils/validator.js
const WeValidator = require('we-validator')
const validator = new WeValidator({
rules: {
name: { required: true },
phone: { required: true, mobile: true },
idcard: { idcard: true } // 选填
},
messages: {
name: { required: '请输入姓名' },
phone: {
required: '请输入手机号',
mobile: '手机号格式不正确'
},
idcard: { idcard: '身份证号格式不正确' }
}
})
module.exports = validator
// pages/form/index.js
const validator = require('../../utils/validator')
Page({
onSubmitForm(e) {
const { value } = e.detail
if (!validator.checkData(value)) return
// 校验通过,提交表单
wx.request({
url: 'https://api.example.com/submit',
data: value,
method: 'POST'
})
}
})
自定义错误提示#
const validator = new WeValidator({
rules: { username: { required: true } },
messages: { username: { required: '请输入用户名' } },
// 自定义错误展示方式(替代默认 showToast)
onMessage: (errors) => {
// errors 是数组,包含所有校验失败的字段
errors.forEach(err => {
console.log(`${err.field}: ${err.message}`)
})
// 使用自定义弹窗
wx.showModal({
title: '提示',
content: errors[0].message,
showCancel: false
})
}
})
添加自定义规则#
// 注册自定义规则
WeValidator.addRule('password', (value, param) => {
// 密码:8-20位,至少包含字母和数字
return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/.test(value)
})
// 使用自定义规则
const validator = new WeValidator({
rules: {
pwd: { required: true, password: true }
},
messages: {
pwd: {
required: '请输入密码',
password: '密码需 8-20 位,包含字母和数字'
}
}
})
常见陷阱#
- 多字段同时校验:默认
checkData只显示第一个错误,如需显示所有错误需配置onMessage回调 - 选填字段:非
required的字段只有在用户填写了值时才会校验其他规则 - 规则执行顺序:按
rules对象中定义的属性顺序执行,required总是先校验 - CDN 引入注意:
WeValidator会挂载到window全局对象
生态资源#
相关项目#
| 项目 | 说明 |
|---|---|
| async-validator | 通用异步验证库,Ant Design 表单验证底层(8K+⭐) |
| vtils | 多平台工具库,包含验证器子模块(252⭐) |
| uni-forms | uni-ui 表单组件,内置验证规则 |
框架适配#
we-validator 的零依赖特性使其能与所有主流框架配合使用:
- 原生小程序:直接
require('we-validator') - Taro:
import WeValidator from 'we-validator' - uni-app:
import WeValidator from 'we-validator' - mpvue/wepy:同上
- 浏览器:
<script>标签引入,window.WeValidator - Node.js:
const WeValidator = require('we-validator')
版本更新#
- v2.1.18(2026-01-13):优化校验逻辑,修复选填字段校验问题
- v2.1.0(2025-08):新增
digits规则,改进range规则支持数组参数 - v2.0.0(2024-09):2.x 重大更新,API 重构,推荐升级(参考 UPGRADE.md)
- v1.x(2018-2024):稳定维护版本,与 2.x API 有差异