如何使用 Yup 验证字符串数组

您好！在本教程中，您将学习如何使用 Yup 验证库验证字符串数组。首先，您将学习如何验证字符串，然后将其应用于数组。我最近遇到了这个问题，表单要求每个输入字段不能为空。我将在本教程中分享我是如何做到的。

什么是是？

是的，是一个流行的、简单的、开源的、用于 JavaScript（和 Typescript）的运行时验证库。 Yup 是一个 JavaScript 模式验证库，它提供了一种以声明性且易于使用的方式定义和验证数据模式的方法。它通常用于前端开发，特别是表单和数据输入验证。开发人员可以使用 Yup 的 API 创建验证模式，指定他们期望的数据的形状和约束。

介绍

假设，您正在实现一个用户可以输入多个电子邮件的表单。您必须检查每封电子邮件是否有效，但如何实际创建一个架构，其中每封电子邮件都被验证为电子邮件？

import { object, string, array } from 'yup'

const schema = object({
  emails: array() //how do you validate each email in the array as an actual email? 
});

如何验证字符串

要验证 yup 中的字符串，您必须使用 string() 函数以及其他函数。

例如，如果您需要有效的电子邮件，您可以使用 string().email().

import { object, string, array } from 'yup'

const schema = object({
  email: string().email()
});

const isValid = schema.isValidSync({
    emails: ["", "@test.com"],
  });
console.log(isValid); //true which is wrong since they are clearly not emails

如果需要必填字段，可以使用string().required().

import { object, string, array } from 'yup'

const schema = object({
  requiredField: string().required()
});

这很简单，现在让我们将其应用到数组。

如何验证 Yup 中的字符串数组

要验证 yup 中的字符串数组，您必须使用 array().of() 函数指定要验证的数组类型。例如：

import { object, string, array } from 'yup'

//1. create a simple validation schema for the string
const requiredEmail = string().email().required("Email is required");

//2. apply it to the array().of() function
const schema = object({
  emails: array().of(requiredEmail)
});

现在，当我们尝试使用一些数据再次测试它时，我们得到了正确的结果：

let isValid = schema2.isValidSync({
  emails: ["", "@test.com"],
});
console.log(isValid); //false

isValid = schema2.isValidSync({
  emails: ["hi@test.com", "hello@test.com"],
});
console.log(isValid); //true

如何验证其他类型的数组

类似地，如果您想验证数字数组或任何类型，您可以使用相同的技术。例如：

import { object, string, array, number, boolean } from "yup";

const requiredNumber = number().required();
const optionalBoolean = boolean().optional();
const user = object({
  firstName: string().required(),
  lastName: string().required(),
});
const schema3 = object({
  numbers: array().of(requiredNumber), // array of numbers
  booleans: array().of(optionalBoolean), //array of booleans
  users: array().of(user),  // array of objects
});

基本上就是这样！

结论

您学习了如何在使用 Yup 时验证字符串数组。您还学习了如何使用 array().of() 函数验证其他类型的数组以及创建复杂的数组模式。无论你能用单个对象做什么，你也可以用数组来做。

以上是如何使用 Yup 验证字符串数组的详细内容。更多信息请关注PHP中文网其他相关文章！