一、 개요

본 문서에서는 Vue3와 Element Plus를 활용하여表单 검증 기능을 구현하는 방법에 대해 설명합니다.

二、实现 단계

1. 필요한 컴포넌트 및 유틸리티 import

Vue3의 반응형 상태 관리 도구와 Element Plus의 타입 정의, 라우터, 그리고 API를 import합니다.

import { ref } from "vue";
import type { FormInstance } from 'element-plus'
import { useRouter } from "vue-router";
import { ILoginForm, IValidationRules } from "@/interfaces/authInterface";
import { authApi } from "@/apis/authApi";
import { User, Lock } from "@/components/icons";

2. 데이터 초기화

로그인表单의 데이터를 저장할 ref 인스턴스와表单 인스턴스 참조용 ref, 그리고 검증 규칙을 정의합니다.

const $router = useRouter();
const loginForm = ref<ILoginForm>({ username: "", password: "" });
const formRef = ref<FormInstance>()
const validationRules = ref<IValidationRules>({
  username: [
    { required: true, message: "사용자명을 입력해 주세요", trigger: "blur" },
    { pattern: /^[a-zA-Z0-9]{4,10}$/, message: "영문 대소문자와 숫자 4~10자", trigger: "blur" },
  ],
  password: [
    { required: true, message: "비밀번호를 입력해 주세요", trigger: "blur" },
    { pattern: /^[a-zA-Z0-9!@#$%^&*(),._-]{6,12}$/, message: "영문, 숫자, 특수문자 6~12자", trigger: "blur" }
  ]
})

3. HTML 템플릿 구성

el-form 컴포넌트를 사용하여表单을 구성합니다. ref를 통해表单 인스턴스에 접근하고, model과 rules 속성을 통해 데이터와 검증 규칙을 연결합니다.

<el-form class="auth_form" ref="formRef" :model="loginForm" :rules="validationRules">
   <h1>Welcome</h1>
   <h2>시스템에 오신 것을 환영합니다</h2>
   <el-form-item class="form_item" prop="username">
       <el-input :prefix-icon="User" placeholder="사용자명 입력" v-model="loginForm.username"> 
       </el-input>
   </el-form-item>
   <el-form-item class="form_item" prop="password">
      <el-input type="password" placeholder="비밀번호 입력" :prefix-icon="Lock"                                   
        v-model="loginForm.password" show-password></el-input>
   </el-form-item>
   <el-form-item class="form_item">
      <el-button class="submit_btn" type="primary" @click="handleSubmit(formRef)">로그인</el-button>
   </el-form-item>
</el-form>

4. 커스텀 검증 로직 구현

submitForm 함수에서는表单의 validate 메서드를 호출하여 검증 수행합니다. 검증 성공 시 API를 호출하고, 실패 시 알림을 표시합니다.

const handleSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return

  formEl.validate(async(valid) => {
    if (valid) {
      const res = await authApi(loginForm.value);
      console.log(res);
      
      if (res.data.code !== 1) {
        ElNotification({
          title: '로그인 실패',
          message: '사용자명 또는 비밀번호가 올바르지 않습니다',
          type: 'error',
        })
      } else {
        localStorage.setItem("token", res.data.data.token);
        $router.push("/dashboard");
        ElNotification({
          title: '로그인 성공',
          message: '다시 오신 것을 환영합니다',
          type: 'success',
        })
      }
    } else {
      ElNotification({
          title: '검증 실패',
          message: '사용자명과 비밀번호를 입력해 주세요',
          type: 'error',
        })
    }
  })
}

三、表单 필드 초기화 및 검증 결과 제거

참고: resetFields 메서드는 수정 모드에서 초기값 문제가 발생할 수 있습니다. 초기값은 유지되면서 검증 결과만 제거하고 싶다면 watch를 사용하여表单 객체를 빈 객체로 재설정할 수 있습니다.

watch(() => {
    return dialogVisible.value
}, () => {
    if (!dialogVisible.value) {
        formData.value = {}
    }
})

四、 주요 용어 정리