用Joi守住数据防线!Node.js/前端必备校验神器入门与进阶

Joi 是什么?

Joi 是一个为 JavaScript 提供强大数据校验和数据结构描述能力的库。在 Node.js、前端都广受欢迎,常用于接口参数校验、表单验证等场景。本文带你逐步掌握 Joi 的用法!


1. 安装 Joi

bash 复制代码
npm install joi

2. Joi 的基本校验

Joi 最大的特点是声明式地描述数据结构,再去校验数据。它提供了一系列类型方法。

2.1 校验字符串

js 复制代码
const Joi = require('joi');

// 定义一个字符串3-10个字符校验规则
const schema = Joi.string().min(3).max(10).required();

// 数据校验
const result = schema.validate('abc');
console.log(result); // { value: 'abc' }

2.2 校验数字

js 复制代码
// 定义一个数据0-100
const schema = Joi.number().integer().min(0).max(100);
console.log(schema.validate(50));      // 合法
console.log(schema.validate(-10));     // 错误

3. 对象的校验

js 复制代码
const userSchema = Joi.object({
    username: Joi.string().alphanum().min(3).max(20).required(),
    age: Joi.number().integer().min(0).max(120),
    email: Joi.string().email()
});

const data = {
    username: 'alice',
    age: 25,
    email: 'alice@example.com'
};

const { error, value } = userSchema.validate(data);
if (error) {
    console.log('数据校验失败:', error.details);
} else {
    console.log('校验成功', value);
}

4. 复杂场景的深度校验

Joi 支持数组、嵌套对象、枚举等更复杂的结构。

4.1 校验数组

js 复制代码
const schema = Joi.array().items(Joi.string().min(2));
console.log(schema.validate(['ab', 'cd'])); // 合法

4.2 嵌套对象

js 复制代码
const schema = Joi.object({
    first: Joi.object({
        name: Joi.string().required(),
        scond: Joi.object({
            phone: Joi.string().pattern(/^\d{11}$/)
        })
    })
});
console.log(schema.validate({
    first: {
        name: 'John',
        scond: {
            phone: '12345678901'
        }
    }
})); // 合法

4.3 联合类型、枚举

js 复制代码
const schema = Joi.string().valid('male', 'female', 'other');
schema.validate('male'); // 合法
schema.validate('robot'); // 错误

5. 高级用法:自定义校验、条件校验

5.1 条件校验

js 复制代码
const schema = Joi.object({
    type: Joi.string().valid('A', 'B'),
    value: Joi.when('type', {
        is: 'A', then: Joi.number().required(),
        otherwise: Joi.string().required()
    })
});

console.log(schema.validate({ type: 'B', value: 123 })); // "value" must be a string

5.2 自定义校验

js 复制代码
const schema = Joi.string().custom((value, helpers) => {
  if (value !== value.split('').reverse().join('')) {
    return helpers.error('any.invalid');
  }
  return value;
}, 'Palindrome validation');

schema.validate('abcba'); // OK
schema.validate('abc');   // Error

6. 实践小结:如何在项目中应用 Joi

  • 后端接口参数校验:如在 Express.js、Koa.js 的接口中校验 req.body、req.query 的数据。
  • 前端表单校验:如配合表单库,实现前端复杂校验。
  • 统一错误处理:Joi 校验失败会返回详细的错误信息,可以统一封装友好的提示。

点个赞,关注我获取更多实用 JavaScript 技术干货!如果觉得有用,记得收藏本文!

相关推荐
wordbaby4 分钟前
TanStack Router 路径参数(Path Params)速查表
前端
梵尔纳多16 分钟前
Electron 主进程和渲染进程通信
javascript·arcgis·electron
盟接之桥1 小时前
盟接之桥--说制造:从“找缝隙”到“一万米深”——庖丁解牛式的制造业精进之道
大数据·前端·数据库·人工智能·物联网·制造
巴拉巴拉~~1 小时前
Flutter 通用滑块组件 CommonSliderWidget:单值 / 范围 + 刻度 + 标签 + 样式自定义
开发语言·前端·javascript
韭菜炒大葱1 小时前
现代前端开发工程化:Vue3 + Vite 带你从 0 到 1 搭建 Vue3 项目🚀
前端·vue.js·vite
有意义1 小时前
从 useState 到 useEffect:React Hooks 核心机制详解
javascript·react.js·前端工程化
栀秋6661 小时前
面试常考的最长递增子序列(LIS),到底该怎么想、怎么写?
前端·javascript·算法
Melrose1 小时前
Flutter - 使用Jaspr来构建SEO友好网站
前端·flutter
有点笨的蛋1 小时前
Vue3 项目:宠物照片变身冰球运动员的 AI 应用
前端·vue.js
Zyx20071 小时前
手写 `instanceof`:深入理解 JavaScript 原型链与继承机制
javascript