안녕하세요! 이 튜토리얼에서는 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() 함수를 사용하여 다른 유형의 배열을 검증하고 복잡한 배열 스키마를 만드는 방법도 배웠습니다. 단일 개체로 할 수 있는 모든 작업은 배열로도 수행할 수 있습니다.