如何使用 Yup 驗證字串數組-js教程-PHP中文網

如何使用 Yup 驗證字串數組

王林

發布： 2024-07-19 14:39:28

原創

809 人瀏覽過

How to Validate Array of Strings using 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
});

登入後複製

基本上就是這樣！