[javascript] Nuxt.js에서의 데이터 유효성 검사 방법은?

19 Dec 2023

javascript

Nuxt.js는 Vue.js 기반의 프레임워크로, 데이터 유효성 검사를 위해 Vuelidate, Yup 등의 라이브러리를 사용할 수 있습니다. 이들 라이브러리를 사용하여 입력된 데이터의 유효성을 쉽게 검사하고 처리할 수 있습니다.

Vuelidate를 사용한 데이터 유효성 검사

Vuelidate는 Vue.js 애플리케이션에서 사용할 수 있는 데이터 유효성 검사 라이브러리로, Nuxt.js에서도 동일하게 사용할 수 있습니다. 사용 방법은 다음과 같습니다.

먼저, vuelidate 라이브러리를 설치합니다.

npm install @vuelidate/core @vuelidate/nuxt

다음으로, Nuxt.js에서 vuelidate를 설정합니다.

// nuxt.config.js

export default {
  modules: [
    '@nuxtjs/vuelidate'
  ]
}

이제 데이터 모델을 정의하고 유효성 검사 규칙을 설정합니다.

import { required, email } from '@vuelidate/validators'

export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  validations: {
    form: {
      email: { required, email },
      password: { required }
    }
  }
}

마지막으로, 템플릿에서 유효성 검사를 표시하고 오류 메시지를 표시합니다.

<template>
  <form @submit.prevent="submitForm">
    <div v-if="$v.form.email.$error">Invalid email</div>
    <input v-model.trim="$v.form.email.$model" />
    <div v-if="$v.form.password.$error">Password is required</div>
    <input type="password" v-model.trim="$v.form.password.$model" />
    <button type="submit">Submit</button>
  </form>
</template>

Yup을 사용한 데이터 유효성 검사

Yup은 객체 스키마 유효성 검사를 위한 JavaScript 라이브러리로, Nuxt.js 안에서도 사용할 수 있습니다. 사용 방법은 다음과 같습니다.

먼저 yup 라이브러리를 설치합니다.

npm install yup

데이터 모델을 정의하고 Yup을 사용하여 유효성 검사를 설정합니다.

import * as yup from 'yup'

export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async submitForm() {
      try {
        const schema = yup.object().shape({
          email: yup.string().email().required(),
          password: yup.string().required()
        })
        await schema.validate(this.form, { abortEarly: false })
        // 유효성 검사 통과 시 처리
      } catch (error) {
        // 오류 처리
      }
    }
  }
}

이제 Nuxt.js에서 Vuelidate 또는 Yup을 사용하여 데이터 유효성을 간단히 검사할 수 있습니다.

더 자세한 내용은 다음 참고 자료를 참조하십시오.