16-5 RN之校验表单库yup课程目标上一节中，我们已经使用 Formik 完成了登录表单的基本功能。本节将学习如何

课程目标

上一节中，我们已经使用 Formik 完成了登录表单的基本功能。本节将学习如何使用 Yup 库为表单添加校验规则，确保用户输入的数据合法。

1. 安装 Yup

Yup 是一个专门处理规则校验的库，支持多种类型的校验规则。

安装 Yup

运行以下命令安装 Yup：

yarn add yup

安装 TypeScript 类型声明

如果您使用 TypeScript，还需要安装 Yup 的类型声明：

yarn add -D @types/yup

2. Formik 的 `validationSchema` 属性

Formik 提供了一个名为 validationSchema 的属性，用于定义表单的校验规则。我们可以通过 Yup 来实现这些规则。

3. 使用 Yup 定义校验规则

3.1 导入 Yup

首先，需要导入 Yup：

import * as Yup from 'yup';

说明：* as 的语法表示导入模块的所有导出接口。例如：
tsx
复制
import * as utils from '@/utils';
这会导入 utils 模块中所有的导出内容。

3.2 定义校验规则

使用 Yup 定义表单的校验规则。以下是登录表单的校验规则：

const customervalidation = Yup.object().shape({
  // 账号必须是字符串类型，去除空格，且必填
  account: Yup.string().trim().required('请输入账号'),
  // 密码必须是字符串类型，且必填
  password: Yup.string().required('请输入密码'),
});

3.3 将校验规则绑定到 Formik

在 Formik 组件中，将 validationSchema 属性设置为我们定义的校验规则：

<Formik
  initialValues={initialValues}
  onSubmit={this.onSubmit}
  validationSchema={customervalidation}
>
  {({ handleSubmit, values, handleChange, handleBlur, touched, errors }) => (
    // 表单内容
  )}
</Formik>

4. 显示校验提示信息

4.1 显示错误提示

在每个输入控件下方，显示对应的错误提示信息：

<TextInput
  placeholder="请输入账号"
  onChangeText={handleChange('account')}
  onBlur={handleBlur('account')}
  value={values.account}
/>
{touched.account && errors.account && <Text>{errors.account}</Text>}

<TextInput
  placeholder="请输入密码"
  onChangeText={handleChange('password')}
  onBlur={handleBlur('password')}
  value={values.password}
  secureTextEntry
/>
{touched.password && errors.password && <Text>{errors.password}</Text>}

4.2 参数说明

touched：表示输入控件是否被点击过。
errors：存储校验失败时的错误信息。

5. 测试功能

启动模拟器，打开登录页面。
尝试提交空表单，观察是否提示错误信息。
输入不合法的数据，验证提示是否符合预期。

注意：目前我们只关注功能实现，暂时不处理样式问题。

6. 总结与优劣分析

6.1 优势

使用 Formik 和 Yup，表单校验逻辑更加集中，易于维护。
对于表单项较多的场景，可以显著减少重复代码，提高开发效率。

6.2 劣势

对于简单的表单（如只有 1~2 个字段），使用 Formik 和 Yup 可能增加代码复杂度。

7. 下一节预告

目前，每个输入控件都需要重复绑定 onChangeText 和 onBlur 事件，同时每个错误提示的逻辑也存在一定的重复。幸运的是，Formik 提供了一些封装好的组件，能够进一步减少这些重复操作。

在下一节中，我们将学习如何封装这些重复的功能，提升代码的复用性和可读性。

16-5 RN之校验表单库yup