一个需求、一份表单，再难的数据校验也能轻松搞定

2023-10-16 16:03:37

前后端数据校验：JSON Schema 保驾护航

在现代 Web 应用开发中，数据在前端和后端之间不断传输，确保数据的准确性和完整性至关重要。数据校验是一个不可或缺的环节，而 JSON Schema 以其强大且灵活的特性脱颖而出，成为前后端数据校验的最佳拍档。

什么是 JSON Schema？

JSON Schema 是 JSON（JavaScript Object Notation）数据格式的正式语言，它定义了 JSON 数据的结构、类型和约束。JSON Schema 提供了一种简洁且可扩展的方法来复杂的数据结构，并对其进行验证。

前后端数据校验的妙用

前端校验

JSON Schema 可以嵌入到前端代码中，以便在用户提交数据之前进行本地校验。这可以防止无效或不完整的数据被发送到后端，从而提升用户体验并减少服务器负担。

后端校验

在后端，JSON Schema 可以与 Web 框架集成，以便在处理请求之前对接收到的 JSON 数据进行校验。这可以确保数据符合预期格式，防止无效数据进入数据库或引发应用程序错误。

JSON Schema 的优势

强大且灵活： JSON Schema 可以描述各种复杂的数据结构，并对数据类型、范围、模式等方面进行约束。
跨语言兼容： JSON Schema 是一个独立于语言的规范，可以与任何支持 JSON 的编程语言集成。
可扩展性： JSON Schema 支持扩展，允许用户创建自定义验证规则和数据类型。
文档化： JSON Schema 本身就是一种文档，它清晰地定义了数据的结构和约束，便于团队成员理解和维护。

完美契合场景实例

某电商网站需要开发一个用户注册表单，要求用户填写姓名、邮箱和手机号，其中手机号为必填项。使用 JSON Schema 进行数据校验，具体步骤如下：

前端

const schema = {
  type: "object",
  required: ["name", "email", "phone"],
  properties: {
    name: {
      type: "string",
    },
    email: {
      type: "string",
      format: "email",
    },
    phone: {
      type: "string",
      minLength: 11,
      maxLength: 11,
      pattern: "^1[3456789]\\d{9}const schema = {
  type: "object",
  required: ["name", "email", "phone"],
  properties: {
    name: {
      type: "string",
    },
    email: {
      type: "string",
      format: "email",
    },
    phone: {
      type: "string",
      minLength: 11,
      maxLength: 11,
      pattern: "^1[3456789]\\d{9}$",
    },
  },
};

const isValid = Ajv.validate(schema, data);
quot;,
    },
  },
};

const isValid = Ajv.validate(schema, data);

后端（使用 Node.js 和 Express 框架）

const express = require("express");
const bodyParser = require("body-parser");
const Ajv = require("ajv");

const app = express();
app.use(bodyParser.json());

const schema = {
  type: "object",
  required: ["name", "email", "phone"],
  properties: {
    name: {
      type: "string",
    },
    email: {
      type: "string",
      format: "email",
    },
    phone: {
      type: "string",
      minLength: 11,
      maxLength: 11,
      pattern: "^1[3456789]\\d{9}const express = require("express");
const bodyParser = require("body-parser");
const Ajv = require("ajv");

const app = express();
app.use(bodyParser.json());

const schema = {
  type: "object",
  required: ["name", "email", "phone"],
  properties: {
    name: {
      type: "string",
    },
    email: {
      type: "string",
      format: "email",
    },
    phone: {
      type: "string",
      minLength: 11,
      maxLength: 11,
      pattern: "^1[3456789]\\d{9}$",
    },
  },
};

const ajv = new Ajv();

app.post("/register", (req, res) => {
  const isValid = ajv.validate(schema, req.body);
  if (isValid) {
    // 数据校验通过，进行用户注册逻辑...
  } else {
    res.status(400).json({ error: ajv.errors });
  }
});
quot;,
    },
  },
};

const ajv = new Ajv();

app.post("/register", (req, res) => {
  const isValid = ajv.validate(schema, req.body);
  if (isValid) {
    // 数据校验通过，进行用户注册逻辑...
  } else {
    res.status(400).json({ error: ajv.errors });
  }
});