Vue.js 로 사용자 정의 폼 검증 구현하기

소개

이 프로젝트에서는 Vue.js 를 사용하여 사용자 정의 폼 검증기를 구현하는 방법을 배우게 됩니다. 사용자 정의 폼 검증기를 사용하면 폼 필드를 검증하고 사용자가 폼을 제출하기 전에 데이터의 유효성을 확인할 수 있습니다.

👀 미리보기

Form validation demo animation

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다:

입력 필드의 값이 변경될 때 컴포넌트의 v-model 값을 업데이트하는 FormInput 컴포넌트를 구현하는 방법.
특정 규칙에 따라 이메일 주소를 검증하는 is_email 함수를 구현하는 방법.
정의된 검증 규칙에 따라 폼 데이터를 검증하는 validateForm 함수를 구현하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

Vue.js 에서 사용자 정의 폼 검증기를 생성할 수 있습니다.
사용자 정의 검증 규칙을 사용하여 폼 필드를 검증할 수 있습니다.
폼 검증 오류를 처리하고 사용자에게 표시할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── components
│   ├── FormInput.js
│   └── FormValidator.js
├── css
├── index.html
├── js
│   └── util.js
└── lib
    └── vue.global.js

여기서:

index.html은 메인 페이지입니다.
css는 프로젝트 스타일을 저장하는 폴더입니다.
lib는 프로젝트 종속성을 저장하는 폴더입니다.
components/FormInput.js는 input 컴포넌트입니다.
components/FormValidator.js는 폼 검증기 컴포넌트입니다.
js/util.js는 프로젝트에 필요한 유틸리티 함수입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

FormInput 컴포넌트 구현

이 단계에서는 입력 필드의 값이 변경될 때 index.html에서 컴포넌트의 v-model 값을 업데이트하도록 FormInput 컴포넌트를 구현하는 방법을 배우게 됩니다.

components 디렉토리에 있는 FormInput.js 파일을 엽니다.
FormInput 컴포넌트의 setup 함수에서 목표 1 에 대한 TODO 섹션을 찾습니다.
입력 필드 (클래스 form-input 사용) 의 값이 변경될 때 컴포넌트의 v-model 값을 업데이트하는 이벤트를 트리거하는 코드를 구현합니다.
```
watch(inputValue, (newValue) => {
  emit("update:modelValue", newValue);
});
```
이 코드는 watch 함수를 사용하여 inputValue 반응형 변수의 변경 사항을 관찰합니다. 값이 변경되면 새 값을 가진 이벤트를 발생시켜 상위 컴포넌트의 v-model 바인딩을 업데이트합니다.
FormInput.js 파일에 변경 사항을 저장합니다.

is_email 함수 구현

이 단계에서는 이메일 주소를 검증하기 위해 util.js 파일에서 is_email 함수를 구현하는 방법을 배우게 됩니다.

js 디렉토리에 있는 util.js 파일을 엽니다.
is_email 함수에서 목표 2 에 대한 TODO 섹션을 찾습니다.
제공된 요구 사항에 따라 이메일 주소를 검증하는 로직을 구현합니다:
- 이메일 주소는 6 자에서 20 자 사이여야 합니다.
- 이메일 주소는 @ 기호로 구분된 사용자 이름 부분과 도메인 부분으로 구성되어야 합니다.
- 사용자 이름 부분은 최소 1 자 이상이어야 하며 숫자 또는 문자를 포함할 수 있습니다.
- 도메인 부분은 중간에 .을 포함해야 하며, . 앞부분은 최소 1 자 이상, . 뒷부분은 2~4 자여야 합니다.
다음은 구현 예시입니다:
```
const is_email = (val) => {
  const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
  return emailRegex.test(val);
};
```
util.js 파일에 변경 사항을 저장합니다.

validateForm 함수 구현

이 단계에서는 폼 데이터를 검증하기 위해 FormValidator.js 파일에서 validateForm 함수를 구현하는 방법을 배우게 됩니다.

components 디렉토리에 있는 FormValidator.js 파일을 엽니다.
validateForm 함수에서 목표 3 에 대한 TODO 섹션을 찾습니다.

제공된 formRules 객체를 기반으로 폼 데이터를 검증하는 로직을 구현합니다. 검증은 다음 규칙을 따라야 합니다:

nickname 필드가 비어 있으면 "nickname" 키로 errors 객체에 오류 메시지를 추가합니다.
email 필드의 경우:

필드가 비어 있으면 "email" 키로 errors 객체에 오류 메시지를 추가합니다.
이메일 주소가 규칙을 따르지 않거나 올바른 길이 범위 내에 있지 않으면 "email" 키로 errors 객체에 오류 메시지를 추가합니다.

다음은 구현 예시입니다:

const validateForm = () => {
  return new Promise((resolve, reject) => {
    errors.value = {}; // Clear the previous error message

    // Validate nickname
    try {
      props.rules.nickname.map((item) => {
        item?.validator(null, props.formData.nickname, (err) => {
          if (err) {
            throw "nickname|" + err.message;
          }
        });
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }

    // Validate email
    try {
      props.rules.email.map((item) => {
        if (item?.required) {
          if (props.formData.email == "") throw "email|" + item.message;
        }
        if (item?.type) {
          if (!validateByType(item.type, props.formData.email))
            throw "email|" + item.message;
          if (props.formData.email.length < 6) throw "email|" + item.message;
          if (props.formData.email.length > 20)
            throw "email|" + item.message;
        }
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }

    if (hasErrors.value) {
      resolve(false); // Error exists, validation failed
    } else {
      resolve(true);
    }

    emit("valid", errors.value);
  });
};

FormValidator.js 파일에 변경 사항을 저장합니다.

축하합니다! 이제 사용자 정의 폼 검증기 구현을 완료했습니다. 프로젝트를 실행하고 폼과 상호 작용하여 애플리케이션을 테스트할 수 있습니다. 완료된 효과는 다음과 같습니다:

Completed Effect

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

Vue.js 를 이용한 사용자 정의 폼 검증 구현

소개