105. Validation Triggers

• vue cli start 링크

npm create vue@latest

---

• 프로젝트 링크

---

1. 검증 트리거에 대한 설명

   • validate는 다양한 이벤트에서 입력을 검증하도록 설정할 수 있음
   • 기본적으로 네 가지 경우에 검증이 수행됨:
     1. change 이벤트
     2. JavaScript를 통한 내부 값 변경
     3. blur 이벤트
     4. 폼 제출 시

2. 기본 검증 동작

   • change 이벤트: 요소 값의 변경시 발생
   • JavaScript를 통한 값 변경: v-model 지시문을 이용한 값 변경 시 검증 발생
   • blur 이벤트: 사용자가 입력 필드를 터치하고 벗어날 때 발생
   • 폼 제출: 모든 필드에 대한 검증 수행

---

1. 검증 트리거 변경 방법:

   • validate 파일에서 configure 함수를 통해 검증 트리거 변경 가능.
   • 네 가지 옵션(validateOnBlur, validateOnChange, validateOnInput, validateOnModelUpdate) 설정으로 기본 동작 변경.

2. 각 옵션의 설명:

   • validateOnBlur: blur 이벤트 발생 시 검증. 기본값은 true.
   • validateOnChange: change 이벤트 발생 시 검증. 기본값은 true.
   • validateOnInput: 입력 변경 시 즉시 검증. 가장 공격적인 검증 방식. 기본값은 false.
   • validateOnModelUpdate: v-model을 통한 내부 값 변경 시 검증. 기본값은 true.

3. 기본 동작의 적용:

   • 현재 프로젝트에서는 기본값이 적합하여 기본 동작 사용.
   • 필요에 따라 검증 트리거를 변경할 수 있음.

4. 다음 강의 계획:

   • 다음 강의에서 검증에 대한 작업 계속 진행 예정.

src/includes/validation.ts

import {
  Form as VeeForm,
  Field as VeeField,
  defineRule,
  ErrorMessage,
  configure
} from 'vee-validate'
import {
  required,
  min,
  max,
  alpha_spaces as alphaSpaces,
  email,
  min_value as minVal,
  max_value as maxVal,
  confirmed,
  not_one_of as excluded
} from '@vee-validate/rules'
import type { App } from 'vue'

export default {
  // install(app: App, options?: { [key: string]: any }) {}
  install(app: App) {
    app.component('VeeForm', VeeForm)
    app.component('VeeField', VeeField)
    app.component('ErrorMessage', ErrorMessage)

    defineRule('required', required)
    defineRule('tos', required)
    defineRule('min', min)
    defineRule('max', max)
    defineRule('alpha_spaces', alphaSpaces)
    defineRule('email', email)
    defineRule('min_value', minVal)
    defineRule('max_value', maxVal)
    defineRule('passwords_mismatch', confirmed)
    defineRule('excluded', excluded)
    defineRule('country_excluded', excluded)

    configure({
      generateMessage(ctx) {
        const messages: { [key: string]: string } = {
          required: `The field ${ctx.field} is required.`,
          min: `The field ${ctx.field} is too short.`,
          max: `The field ${ctx.field} is too long.`,
          alpha_spaces: `The field ${ctx.field} may only contain alphabetical characters and space.`,
          email: `The field ${ctx.field} must be a valid email.`,
          min_value: `The field ${ctx.field} is too low.`,
          max_value: `The field ${ctx.field} is too high.`,
          excluded: `You are not allowed to use this value for the field ${ctx.field}`,
          country_excluded: `Due to restrictions, we do not accept users from this location.`,
          passwords_mismatch: `The passwords don't match.`,
          tos: `You must accept the Terms of Services.`
        }

        let message = ''
        const name = ctx.rule?.name

        if (typeof name === 'string') {
          const messagesName = messages[name]
          message = messagesName ? messagesName : `The field ${ctx.field} is invalid`
        }

        return message
      },
      validateOnBlur: true, // blur 이벤트시 유효성 검사 // 기본값 true
      validateOnChange: true, // change 이벤트시 유효성 검사 // 기본값 true
      validateOnInput: false, // input 이벤트시 유효성 검사 // 기본값 false
      validateOnModelUpdate: true // v-model 유효성 검사 // 기본값 true
    })
  }
}