在前端开发中，数据的类型和格式验证是非常关键的一环。在这个过程中，Skeemas 是一个非常好用且容易上手的工具，它可以帮助我们快速地定义数据规范并进行校验。
本文将为大家介绍如何使用 Skeemas 来进行前端数据验证。让我们开始吧！
Skeemas 简介
Skeemas 是一个用于数据验证和格式化的 npm 包。它可以帮助我们定义符合预期规范的数据结构，并检查传入的数据是否符合该规范。同时，它还可用于规范化不符合预期的数据，使其符合规范。
安装 Skeemas
我们可以使用 npm 来安装 Skeemas：
npm install skeemas --save
基本使用
下面我们来看一个简单的例子，它将定义一个数据规范，并使用 Skeemas 检查传入的数据是否符合该规范并进行处理：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - - ----- --------- ----------- - ----- - ----- --------- ---------- - -- ------ - ----- --------- ------- ------- - -- --------- -------- -------- -- ----- -------- - - ----- ------- ------ ---------------- -- ----- ------ - ---------------------------- ---------- -- -------------- - ----------------- ---- -- -------- ---------- - ---- - ----------------- ---- -- ---------- --------------- -展开代码
在上面的例子中，我们定义了一个 userSchema 对象，其中包含了一个用户的名称和电子邮件属性。接着，我们创建了一个 userData 对象，其中包含了不符合定义的数据。
最后，我们使用 skeemas.validate() 方法将 userSchema 和 userData 传递进去并进行了校验。如果数据有效，则输出 User data is valid，否则输出 User data is invalid。
数据类型
下面我们来详细介绍 Skeemas 中支持的数据类型：
string：字符串number：数字integer：整数boolean：布尔值object：对象array：数组null：空值any：任意类型
属性和选项
除了基本类型之外，我们还可以在 Skeemas 中通过属性和选项来更严格地定义数据规范。
以下是 Skeemas 中支持的属性和选项：
title
用于定义数据的名称或描述。它不会影响数据的校验。
const schema = { type: 'object', title: 'Product', properties: { name: { type: 'string', title: 'Product Name' } } };
description
用于定义数据的详细描述。它不会影响数据的校验。
const schema = { type: 'object', description: 'A product description', properties: { name: { type: 'string', description: 'The name of the product' } } };
default
用于定义数据的默认值。
const schema = { type: 'object', properties: { name: { type: 'string', default: 'Untitled' } } };
enum
用于定义数据的枚举值。
-- -------------------- ---- ------- ----- ------ - - ----- --------- ----------- - ------- - ----- --------- ----- ---------- ----------- ---------- - - --展开代码
additionalProperties
用于定义对象类型的数据重的附加属性是否校验
const schema = { type: 'object', additionalProperties: false, properties: { name: { type: 'string' }, email: { type: 'string' } } };
maxProperties 和 minProperties
用于定义对象类型数据的属性个数的范围。
-- -------------------- ---- ------- ----- ------ - - ----- --------- -------------- -- -------------- -- ----------- - ----- - ----- -------- -- ---- - ----- --------- - - --展开代码
patternProperties
用于定义对象类型数据的多个属性名字校验
const schema = { type: 'object', patternProperties: { '^S_': { type: 'string' }, '_Y$': { type: 'number' } } };
required
用于定义数据的必需属性
const schema = { type: 'object', required: ['name', 'email'], properties: { name: { type: 'string' }, email: { type: 'string' } } };
format
用于定义数据的格式
const schema = { type: 'object', properties: { name: { type: 'string', minLength: 5 }, email: { type: 'string', format: 'email' } } };
minLength 和 maxLength
用于定义字符串类型数据的长度范围。
const schema = { type: 'object', properties: { name: { type: 'string', minLength: 3, maxLength: 20 } } };
minimum 和 maximum
用于定义数字类型数据的取值范围。
const schema = { type: 'object', properties: { age: { type: 'integer', minimum: 18, maximum: 60 } } };
nullable
用于定义数据是否可以为空。
const schema = { type: 'object', properties: { name: { type: ['string', 'null'] } } };
dependencies
用于定义数据属性之间的依赖关系。
-- -------------------- ---- ------- ----- ------ - - ----- --------- ------------- - ----- --------- -- --------------------- -- ----------- - ----- - ----- -------- -- ------ - ----- -------- - - --展开代码
oneOf 和 anyOf
用于定义数据满足多个规范中的其中之一或任意一个。
-- -------------------- ---- ------- ----- ------ - - ----- --------- ------ - - ----- --------- ----------- - ----- - ----- -------- -- ------ - ----- -------- - - -- - ----- --------- ----------- - ------ - ----- -------- -- ---- - ----- -------- - - - - --展开代码
自定义插件
除了基本属性和选项之外，我们还可以使用自定义插件来扩展 Skeemas 的功能。
下面是一个自定义插件的示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ---------------- ----- ------------ -------- -------- --------- ----------- - --------------- - ---------- - ---------------- ------ --------- -- - --- ----- ------ - - ----- --------- ----------- - ----- - ----- -------- - - -- ----- ------ - ------------------------ - ----- ----- ---- --- ------------- -- -- ---- ------ -------展开代码
在这个例子中，我们使用 skeemas.plugin() 方法来注册一个自定义插件。该插件定义了一个 foo() 方法，我们可以在校验结果对象上调用它。
总结
在本文中，我们学习了如何在前端开发中使用 Skeemas 来进行数据验证和格式化。我们首先介绍了 Skeemas 的基本功能和安装方法，然后详细地讲解了其支持的数据类型、属性和选项，以及自定义插件的方法和使用。
Skeemas 不仅功能强大，而且非常易于上手，希望能给广大前端开发人员带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f71fdf9a9b7065299ccbb95
