[typescript] 타입스크립트와 Vue.js에서 폼 유효성 검증하기

15 Dec 2023

typescript

이번 포스트에서는 타입스크립트와 Vue.js를 사용하여 폼 유효성 검증을 하는 방법에 대해 알아보겠습니다.

폼 유효성 검증이란?

폼 유효성 검증은 사용자가 입력한 데이터가 기대한 형식과 일치하는지 확인하는 과정을 말합니다. 폼 유효성 검증을 통해 사용자 경험을 향상시키고, 올바르지 않은 데이터가 서버로 전송되는 것을 방지할 수 있습니다.

Vue.js에서의 폼 유효성 검증

Vue.js는 사용자 인터페이스를 구축하기 위한 프로그레시브 프레임워크로서, 컴포넌트 기반 아키텍처를 제공합니다. Vue.js를 사용하면 간단하게 폼 유효성 검증을 구현할 수 있습니다.

<template>
  <form @submit="handleSubmit">
    <input v-model="email" type="text" />
    <button type="submit">Submit</button>
  </form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const email = ref('');

    const handleSubmit = () => {
      if (!email.value.includes('@')) {
        alert('유효한 이메일을 입력해주세요.');
      } else {
        // 서버로 데이터 전송
      }
    };

    return {
      email,
      handleSubmit,
    };
  },
});
</script>

위 예제에서는 @submit 이벤트를 사용하여 폼 제출 시 handleSubmit 메서드를 호출하고, 이메일 유효성을 검증하여 알림창을 통해 사용자에게 피드백을 제공하고 있습니다.

타입스크립트와 함께 폼 유효성 검증하기

Vue.js와 함께 타입스크립트를 사용하면 정적 타입 검사를 통해 코드의 안정성을 높일 수 있습니다. 아래 예제는 타입스크립트를 사용하여 폼 유효성 검증을 구현한 코드입니다.

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface Form {
  email: string;
}

export default defineComponent({
  setup() {
    const form: Form = {
      email: '',
    };

    const handleSubmit = () => {
      if (!form.email.includes('@')) {
        alert('유효한 이메일을 입력해주세요.');
      } else {
        // 서버로 데이터 전송
      }
    };

    return {
      form,
      handleSubmit,
    };
  },
});
</script>

위 예제에서 Form 인터페이스를 사용하여 폼의 타입을 정의하고, form 객체를 이를 활용하여 초기화하였습니다.

마치며

이번 포스트에서는 Vue.js를 사용하여 간단한 폼 유효성 검증을 구현하는 방법과 타입스크립트를 활용하여 안정적인 코드를 작성하는 방법을 살펴보았습니다. 올바른 데이터의 입력과 안전한 데이터 처리를 위해 폼 유효성 검증을 적절히 활용하는 것이 중요합니다. Vue.js와 타입스크립트를 함께 사용하여 더욱 효율적으로 폼 유효성 검증을 구현할 수 있습니다.

더 많은 정보를 원하시면 아래 Vue.js 및 타입스크립트 공식 문서를 참고해주세요.

Vue.js 공식 문서: https://v3.ko.vuejs.org/

타입스크립트 공식 문서: https://www.typescriptlang.org/ko/