[Vue3] quasar input TextField 유효성 검사하기

지난번 글에서 Vite+Vue3 프로젝트에 jwt 로그인 기능 구현에 관한 글을 작성했었다.

디자인 프레임워크로 퀘이사를 사용해서 만들었었는데

기능을 구현하고 나중에 다시 봐보니 로그임 폼에 대한 유효성 검사 기능이 없어서 퀘이사에서 제공하는 유효성 검사 기능에 대해 한번 알아봤다.

유효성 기능 구현 자체는 Vuetify와 유사해서 크게 어려운 부분은 없었다.

---

1. form에 ref 추가

먼저 해야할 부분은 ref 추가이다.

공식 홈페이지에서 유효성 검사를 할 각 q-input에다가 ref를 추가해서 따로따로 하는 예시만 있어서 vuetify 처럼 한 번에 하는 건 안 되는 건가? 해서 해봤는데 잘 된다.

내가 작성한 방법은 이렇다.

<q-form ref="loginForm" class="q-gutter-md">
    <q-input square filled clearable v-model="user_id" :rules="[user_id_rules]" type="text" label="ID" />
    <q-input square filled clearable v-model="user_pw" :rules="[user_pw_rules]" type="password" label="password" />
</q-form>

q-form에다가 ref값을 지정했고, 각 q-input에다가는 검증 처리를 할 rules 속성을 추가했다.

내가 한 방법은 스크립트단에서 함수로 처리하기 위해 저렇게 했고, 간단하게 한다면 저기다 바로 검증 로직을 추가할 수 있다.

공식홈페이지에 나와있는 기본 예제

2. 유효성 검증 함수 추가

먼저 함수를 추가하기 전 form의 유효성 검증 기능을 사용하기 위해 아래와 같이 추가.

const loginForm = ref(null);

템플릿에서 form에 추가한 ref 문자와 같은 변수명으로 만들어주어야 한다. (대소문자도 일치해야함)

vue3 composition API에서 템플릿에 ref를 지정후 해당 컴포넌트 정보를 가져오는 방식이 options API 방식이랑 달라서 이거에 대해 헷갈리는 사람들이 꽤  많을 것 같다.

그리고 선언한 변수나 함수들은 사용되려면 return에도 추가해야한다.

setup() {
	...
    const loginForm = ref(null);
    ...
    
    return {
    	...
        loginForm
        ...
    }
}

이제 검증할 함수를 만들어보자.

각 q-input에 rules 속성 안에 user_id_rules, user_pw_rules를 지정해주었다.

그럼 맞춰서 함수로 만들어주면 된다.

const user_id_rules = (v) => {
      if (!v) {
        return '아이디를 입력해주세요.';
      }
      const kor = v.match(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g);
      if (kor) {
        return '한글은 입력할 수 없습니다.'
      }
      const special = v.match(/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g);
      if (special) {
        return '특수문자는 입력할 수 없습니다.'
      }
      return true;
    }
    const user_pw_rules = (v) => {
      if(!v) {
        return '패스워드를 입력해주세요.';
      }
      return true;
    }

이 함수들도 return에 넣어줘야 작동한다.

각 input 창에 값이 입력되면 인자 값(v)이 들어온다. 

그리고 각 함수 처음에 !v 라는 조건문이 있다. 이렇게 null에 대한 조건문을 하지 않으면 input 창에 값이 없을 때 에러가 발생하므로 반드시 해줘야 한다.

그 이후에 정규식을 쓰거나 필요한 조건 로직을 추가해서 출력하고 싶은 문구를 반환시키면 된다.

문구를 반환 시키면 해당 문구가 에러 문구로 출력된다.

정상으로 넘기고 싶으면 true를 반환하면 된다.

위 로직에 대한 결과 화면은 이렇다.

첫 화면

한글 입력시 에러 문구

특수문자 입력시 에러 문구

3.  유효성 검사 결과 확인

form 안에 있는 input들이 유효성 검사를 통과했는지 아닌지 여부 판단은 이렇게 한다.

const login = async () => {
      try {
        const valid = await loginForm.value.validate();
        if(valid) {
          const rs = await store.dispatch('auth/login', {
            user_id: user_id.value,
            user_pw: user_pw.value
          })
          alert(rs);
        }
      } catch (err) {
        alert(err);
      }
    }

폼ref.value.validate() 이게 form 안의 유효성 체크 결과를 알려준다.

await을 붙인 이유는 해당 함수가 프로미스 함수인지 await 없이 결과 값을 받으니 pending이 걸리는 게 확인돼서 await을 붙여줬다.

내가 작성한 코드에서 2개의 input이 모두 유효성 검사가 통과하면 true를 반환하고 한 개라도 통과하지 못하면 false를 반환한다.

이렇게 하면 끝이다....

 

소스 전체

<template lang="">
  <div class="q-pa-md q-gutter-sm">
    <q-dialog v-model="needLogin" persistent transition-show="scale" transition-hide="scale">

      <q-card class="bg-teal text-white">

        <q-card-section>
          <div class="text-h6">Please login...</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <div class="column">
            <div class="row justify-center items-center">
              <q-card square bordered class="q-pa-lg shadow-1">
                <q-card-section>
                  <q-form ref="loginForm" class="q-gutter-md">
                    <q-input square filled clearable v-model="user_id" :rules="[user_id_rules]" type="text" label="ID" />
                    <q-input square filled clearable v-model="user_pw" :rules="[user_pw_rules]" type="password" label="password" />
                  </q-form>
                </q-card-section>
                <q-card-actions class="q-px-md">
                  <q-btn unelevated color="light-green-7" size="lg" class="full-width" label="Login" @click="login" />
                </q-card-actions>
              </q-card>
            </div>
          </div>
        </q-card-section>

      </q-card>

    </q-dialog>
  </div>
</template>
<script>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
export default {
  setup() {
    const user_id = ref('');
    const user_pw = ref('');
    const loginForm = ref(null);
    const store = useStore();

    //@@ 로그인 필요 여부
    const needLogin = computed(() => {
      return store.getters['auth/needLogin'];
    })
    const user_id_rules = (v) => {
      if (!v) {
        return '아이디를 입력해주세요.';
      }
      const kor = v.match(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g);
      if (kor) {
        return '한글은 입력할 수 없습니다.'
      }
      const special = v.match(/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g);
      if (special) {
        return '특수문자는 입력할 수 없습니다.'
      }
      return true;
    }
    const user_pw_rules = (v) => {
      if(!v) {
        return '패스워드를 입력해주세요.';
      }
      return true;
    }

    //@@ 로그인 처리
    const login = async () => {
      try {
        const valid = await loginForm.value.validate();
        if(valid) {
          const rs = await store.dispatch('auth/login', {
            user_id: user_id.value,
            user_pw: user_pw.value
          })
          alert(rs);
        }
      } catch (err) {
        alert(err);
      }
    }

    return {
      needLogin,
      loginForm,
      user_id,
      user_pw,
      login,
      user_id_rules,
      user_pw_rules
    }
  }
}
</script>
<style lang="">
  
</style>

공식홈페이지에 보면 검증 방법에 대해 여러 예제가 있으니 한 번 참고해보길...

https://quasar.dev/vue-components/input#validation

Input | Quasar Framework