你好！在本教程中，您將學習如何使用 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: ["[email protected]", "[email protected]"],
});
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() 函數驗證其他類型的陣列以及建立複雜的陣列模式。無論你能用單一物件做什麼，你也可以用陣列來做。