在 React Native 中安装 Yup

Yup 是一个 JavaScript 的对象模式验证库，它可以用于验证 React Native 应用程序的表单。安装 Yup 可以使开发者更轻松地验证表单输入数据是否符合要求，提高了应用程序的健壮性。

安装

在 React Native 应用程序中安装 Yup 很容易。只需要运行以下命令：

npm install yup

或者使用 yarn:

yarn add yup

用法

接下来，将 Yup 导入到 JavaScript 文件中：

import * as Yup from 'yup';

创建一个验证模式

现在，可以使用 Yup 来创建一个验证模式，如下所示：

const schema = Yup.object().shape({
  name: Yup.string().required(),
  email: Yup.string().email().required(),
  age: Yup.number().positive().integer().required(),
});

在上面的代码中，我们创建了一个模式 schema，该模式包含三个字段：name，email 和 age。每个字段都有一个相应的验证规则。 name 和 email 字段都是字符串和必填项，email 需要符合 email 地址格式要求，而 age 是正整数且为必填项。

验证表单数据

一旦有了验证模式，就可以使用它来验证表单数据。假设以下是包含表单数据的对象：

const dataToBeValidated = {
  name: 'Alice',
  email: 'alice@example.com',
  age: 20,
};

可以使用 schema 对象验证表单数据，如下所示：

schema.isValid(dataToBeValidated).then(function (isValid) {
  console.log(isValid); // true
});

isValid() 方法返回一个 promise，如果表单数据符合验证规则，则为 true；否则为 false。

显示错误信息

如果表单数据无效，则可以使用 validate() 方法来显示错误信息。该方法返回 promise，该 promise 可以接收所有无效输入数据的错误信息。

schema
  .validate(dataToBeValidated)
  .then(function () {
    console.log('validation succeeded');
  })
  .catch(function (err) {
    console.error(err.errors);
  });

上面的代码将表单数据验证为无效，并在控制台中打印出该数据的所有错误信息。

结论

以上是安装和使用 Yup 的基本知识。它简化了 React Native 表单输入数据的验证，使开发人员能够更轻松地确保输入数据的正确性。无论你是使用表单来提交数据还是从后端 API 接收数据，使用 Yup 都是必要的一步。