HOW - Form 表单组件实践 - 结合 Form 和 Schema 的数据验证方案（Shema Validation）

@PHARAOH

已于 2024-08-07 11:25:05 修改

阅读量808

点赞数 29

分类专栏：前端 Form 表单组件学习专栏文章标签： javascript 前端 react.js

于 2024-07-12 11:46:49 首次发布

本文链接：https://blog.csdn.net/weixin_58540586/article/details/140375071

版权

前端 Form 表单组件学习专栏专栏收录该内容

3 篇文章 0 订阅

订阅专栏

示例

常见的库包括 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>
    <Formik
      initialValues={{ 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 组件来包装我们的表单，提供初始值、验证模式和提交处理函数。

<Formik
  initialValues={{ 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);
});