vue 에서 yup을 사용하여 유효성 검사하는 방법 정리

1. yup 스키마 정의

yup은 스키마를 정의하므로써 규칙을 정의 합니다.

const schema = yup.object().shape({
  title: yup.string().required('title is required').min(1, 'title is required'),
  category: yup
    .string()
    .required('category is required')
    .min(1, 'category is required'),
  data: yup.string().required('data is required').min(1, 'data is required'),
});

 

• title: 문자열이어야 하며, 필수 값입니다. 최소 한 글자 이상이 입력되어야 합니다.
• category: 문자열이어야 하며, 필수 값입니다.
• data: 문자열이어야 하며, 필수 값입니다. 최소 한 글자 이상이 입력되어야 합니다.

 

2. validateField 함수

const validateField = async (fieldName: keyof FormState) => {
  try {
    await schema.validateAt(fieldName, formState);
    errors[fieldName] = '';
  } catch (e) {
    if (e instanceof yup.ValidationError) {
      errors[fieldName] = e.message;
    }
  }
};

 

 

이 함수는 yup의 validateAt 메서드를 사용해 특정 필드(fieldName)만 검증하며, 검증에 실패하면 errors 객체에 오류 메시지를 저장합니다. 필드가 유효하면 해당 필드의 오류 메시지는 빈 문자열로 설정됩니다.

• 각 입력 필드의 @input 또는 @change 이벤트에서 호출됩니다. 예를 들어, title 필드의 입력 시에는 @input="validateField('title')"로 지정되어 있습니다.

3. createHandler 함수

이 함수는 폼이 제출될 때 호출되며, 모든 필드에 대한 유효성 검증을 한 번에 수행합니다.

const createHandler = async () => {
  try {
    errors.category = '';
    errors.title = '';
    errors.data = '';

    await schema.validate(formState, { abortEarly: false });
    // 이후 처리 로직
  } catch (e) {
    if (e instanceof yup.ValidationError) {
      e.inner.forEach((error) => {
        if (error.path) {
          errors[error.path as keyof typeof errors] = error.message;
        }
      });
    } else {
      console.error(e);
    }
  }
};

 

 

• schema.validate(formState, { abortEarly: false })는 formState의 모든 필드에 대한 유효성 검사를 수행하며, abortEarly: false 옵션을 통해 모든 필드의 오류를 한꺼번에 확인할 수 있습니다.
• 만약 검증에 실패하면, 각 필드별로 오류 메시지가 errors 객체에 저장됩니다.
• 검증이 성공하면 서버에 데이터 요청을 보내는 로직이 실행됩니다.

4. 유효성 검증의 시각적 피드백

각 필드에서 유효성 검증 결과를 시각적으로 표시합니다.

<a-form-item
  :rules="[{ required: true, message: '구분은 필수입니다' }]"
  label="구분"
  :validate-status="errors.category ? 'error' : ''"
  :help="errors.category"
>

 

 

• validate-status 속성은 errors 객체에서 해당 필드에 오류가 있는지 확인하여 'error'로 설정됩니다.
• help 속성은 해당 필드에 대한 오류 메시지를 표시합니다. 예를 들어, errors.category에 값이 있을 경우 해당 값이 화면에 표시됩니다.

 

결론

• yup 스키마는 각 필드의 유효성 검사를 정의합니다.
• validateField는 사용자가 입력할 때 실시간으로 유효성을 검증합니다.
• createHandler는 폼이 제출될 때 전체 폼을 검증하고, 실패한 필드에 대해 오류 메시지를 표시합니다.
• 시각적 피드백은 errors 객체를 통해 각 필드에 실시간으로 반영됩니다.