HOW - 结合 Form 和 Schema 的数据验证方案（Shema Validation）

示例

常见的库包括 Formik 和 Yup。Formik 用于管理表单状态，而 Yup 是一个用于数据验证的 Schema Validation 库。以下是一个结合 Formik 和 Yup 的示例，用于处理表单和 Schema Validation。

安装

首先，安装 Formik 和 Yup：

npm install formik yup

示例代码

以下是一个完整的示例，展示了如何使用 Formik 和 Yup 进行表单处理和 Schema Validation。

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';// 定义表单验证的 Schema
const validationSchema = Yup.object().shape({name: Yup.string().min(2, '名字太短了!').max(50, '名字太长了!').required('名字是必填项'),email: Yup.string().email('无效的电子邮件地址').required('电子邮件是必填项'),password: Yup.string().min(8, '密码必须至少8个字符').required('密码是必填项'),
});const MyForm = () => (<div><h1>注册表单</h1><FormikinitialValues={{ name: '', email: '', password: '' }}validationSchema={validationSchema}onSubmit={(values, { setSubmitting }) => {setTimeout(() => {alert(JSON.stringify(values, null, 2));setSubmitting(false);}, 400);}}>{({ isSubmitting }) => (<Form><div><label htmlFor="name">名字</label><Field type="text" name="name" /><ErrorMessage name="name" component="div" /></div><div><label htmlFor="email">电子邮件</label><Field type="email" name="email" /><ErrorMessage name="email" component="div" /></div><div><label htmlFor="password">密码</label><Field type="password" name="password" /><ErrorMessage name="password" component="div" /></div><button type="submit" disabled={isSubmitting}>提交</button></Form>)}</Formik></div>
);export default MyForm;

解释

Validation Schema：我们使用 Yup 来定义一个验证模式，包括每个字段的验证规则。

const validationSchema = Yup.object().shape({name: Yup.string().min(2, '名字太短了!').max(50, '名字太长了!').required('名字是必填项'),email: Yup.string().email('无效的电子邮件地址').required('电子邮件是必填项'),password: Yup.string().min(8, '密码必须至少8个字符').required('密码是必填项'),
});

Formik Setup：使用 Formik 组件来包装我们的表单，提供初始值、验证模式和提交处理函数。

<FormikinitialValues={{ name: '', email: '', password: '' }}validationSchema={validationSchema}onSubmit={(values, { setSubmitting }) => {setTimeout(() => {alert(JSON.stringify(values, null, 2));setSubmitting(false);}, 400);}}
>

Form Components：使用 Formik 提供的 Field 组件来绑定表单字段，并使用 ErrorMessage 组件来显示验证错误消息。

<Form><div><label htmlFor="name">名字</label><Field type="text" name="name" /><ErrorMessage name="name" component="div" /></div><div><label htmlFor="email">电子邮件</label><Field type="email" name="email" /><ErrorMessage name="email" component="div" /></div><div><label htmlFor="password">密码</label><Field type="password" name="password" /><ErrorMessage name="password" component="div" /></div><button type="submit" disabled={isSubmitting}>提交</button>
</Form>

这个示例展示了如何将 Formik 和 Yup 结合使用，以便在 React 应用中实现表单处理和验证。通过这种方式，可以轻松地管理表单状态并确保输入数据的有效性。

Schema Validation 产生背景和机制

Schema Validation 库（如 zod 和 yup）的产生背景主要源于前端开发中对数据验证的需求。

随着 JavaScript 和 TypeScript 在前端开发中的普及，验证数据结构和内容的正确性变得尤为重要。以下是这些库的产生背景、机制以及如何运作的简要说明。

产生背景

数据完整性和安全性：在前端开发中，确保数据的完整性和安全性至关重要。无论是从用户输入中获取数据，还是从 API 请求中接收数据，都需要对数据进行验证，以确保其格式和内容符合预期。
代码简洁和可维护性：传统的数据验证方式通常涉及大量的条件判断代码，这不仅繁琐，而且难以维护。Schema Validation 库提供了一种声明式的方法，使验证逻辑更加简洁和易于维护。
TypeScript 的流行：随着 TypeScript 的普及，对静态类型和类型安全的需求增加。Schema Validation 库能够很好地与 TypeScript 集成，提供类型推断和类型验证功能。

机制

Schema Validation 库通常采用声明式的方法来定义数据的结构和验证规则。这些库会根据定义的 Schema 自动生成验证逻辑，并在运行时对数据进行验证。

Zod

zod 是一个 TypeScript 优先的 Schema 声明和验证库。它的设计目标是提供一个简单、直观的 API，同时利用 TypeScript 的类型系统进行类型推断和类型安全。

import { z } from 'zod';const schema = z.object({name: z.string().min(2, '名字太短了!').max(50, '名字太长了!'),email: z.string().email('无效的电子邮件地址'),password: z.string().min(8, '密码必须至少8个字符'),
});// 验证数据
const result = schema.safeParse({name: 'John',email: 'john.doe@example.com',password: 'password123',
});if (!result.success) {console.log(result.error.errors);
} else {console.log('数据有效:', result.data);
}

Yup

yup 是一个 JavaScript 的 Schema 构建器，用于运行时值解析和验证。它支持嵌套对象和数组的验证，提供丰富的验证规则和自定义验证功能。

import * as Yup from 'yup';const schema = Yup.object().shape({name: Yup.string().min(2, '名字太短了!').max(50, '名字太长了!').required('名字是必填项'),email: Yup.string().email('无效的电子邮件地址').required('电子邮件是必填项'),password: Yup.string().min(8, '密码必须至少8个字符').required('密码是必填项'),
});// 验证数据
schema.validate({name: 'John',email: 'john.doe@example.com',password: 'password123',
})
.then((data) => {console.log('数据有效:', data);
})
.catch((err) => {console.log(err.errors);
});