[javascript] Svelte에서 데이터 검증과 유효성 검사를 어떻게 할 수 있나요?

24 Nov 2023

javascript

1. 내장된 유효성 검사

Svelte는 내장된 유효성 검사 기능을 제공하여 간단하게 데이터를 검증할 수 있습니다. 이를 사용하려면 입력 필드에 bind: 바인딩을 사용하여 데이터를 바인딩한 다음, 해당 필드에 input 이벤트를 추가하여 텍스트가 변경될 때마다 데이터를 검증하면 됩니다. 예를 들어, 이메일 주소의 유효성을 검사하는 코드는 다음과 같습니다.

<script>
  let email = '';
  let errorMessage = '';

  function validateEmail() {
    if (email.length === 0) {
      errorMessage = '이메일 주소를 입력해주세요.';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      errorMessage = '유효한 이메일을 입력해주세요.';
    } else {
      errorMessage = '';
    }
  }
</script>

<input type="email" bind:value={email} on:input={validateEmail}>
{#if errorMessage}<p>{errorMessage}</p>{/if}

위의 코드는 입력 필드와 입력에 대한 유효성 검사 메시지를 표시하는 예시입니다. validateEmail 함수는 input 이벤트에서 호출되며, 이메일 주소가 유효한지 검사하고 관련된 오류 메시지를 설정합니다.

2. 외부 라이브러리 사용

Svelte는 외부 데이터 검증 라이브러리를 사용하여 더 복잡한 검증 요구 사항을 처리할 수도 있습니다. 예를 들어, Yup과 같은 라이브러리를 사용하여 데이터를 검증할 수 있습니다.

<script>
  import { yup } from 'yup';

  const schema = yup.object().shape({
    email: yup.string().email('유효한 이메일 주소를 입력하세요.').required('이메일 주소를 입력하세요.'),
  });

  let email = '';
  let errorMessages = [];

  async function validateEmail() {
    try {
      await schema.validate({ email }, { abortEarly: false });
      errorMessages = [];
    } catch (err) {
      errorMessages = err.errors;
    }
  }
</script>

<input type="email" bind:value={email} on:input={validateEmail}>
{#each errorMessages as message}<p>{message}</p>{/each}

위의 코드는 Yup 라이브러리를 사용하여 이메일 주소를 검증하는 예시입니다. 검증 실패 시 해당 오류 메시지를 배열에 저장하고, 이를 반복문을 사용하여 표시합니다.

Svelte에서 데이터를 검증하고 유효성을 확인하는 방법에는 다양한 접근 방식이 있습니다. 내장된 유효성 검사 기능을 사용하거나 외부 라이브러리를 통해 더 복잡한 검증 요구 사항을 처리할 수 있습니다. 선택한 방법에 따라 애플리케이션의 유효성 검사 요구 사항에 맞게 적절한 방식을 선택하시면 됩니다.