▶_MiniApp Toolkit

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 Stars237⭐
Forks51
npm 版本数46(latest: 2.1.18)
npm 最后发布2026-01-13
许可证MIT
创建年份2018

设计规范#

API 设计哲学#

we-validator 采用「实例化 + 配置驱动」的设计模式,核心 API 仅 5 个,学习成本极低:

code
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
urlURL 地址url: true
date日期格式date: true

审核规范#

不适用(工具库,非平台类资源)

开发指南#

安装#

code
# npm
npm install we-validator --save

# 或 CDN(浏览器/H5)
# <script src="https://unpkg.com/we-validator/dist/we-validator.min.js"></script>

微信小程序中使用#

code
// 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
code
// 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'
    })
  }
})

自定义错误提示#

code
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
    })
  }
})

添加自定义规则#

code
// 注册自定义规则
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 位,包含字母和数字'
    }
  }
})

常见陷阱#

  1. 多字段同时校验:默认 checkData 只显示第一个错误,如需显示所有错误需配置 onMessage 回调
  2. 选填字段:非 required 的字段只有在用户填写了值时才会校验其他规则
  3. 规则执行顺序:按 rules 对象中定义的属性顺序执行,required 总是先校验
  4. CDN 引入注意WeValidator 会挂载到 window 全局对象

生态资源#

相关项目#

项目说明
async-validator通用异步验证库,Ant Design 表单验证底层(8K+⭐)
vtils多平台工具库,包含验证器子模块(252⭐)
uni-formsuni-ui 表单组件,内置验证规则

框架适配#

we-validator 的零依赖特性使其能与所有主流框架配合使用:

  • 原生小程序:直接 require('we-validator')
  • Taroimport WeValidator from 'we-validator'
  • uni-appimport WeValidator from 'we-validator'
  • mpvue/wepy:同上
  • 浏览器<script> 标签引入,window.WeValidator
  • Node.jsconst 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 有差异