1. v-form, v-input

1-1. Request 차단

• 유효하지 않은 값을 Submit 하면 제출 버튼이 비활성화 되는 등, 잘못된 형태의 Request를 보내지 않게 차단해야 함
  • value 값이 변경되면(@change) 처리하는 방식이 존재하나, 사용자가 focus out 해야만 change 상태가 인식된다는 문제점 有
• 유효성을 체크를 모두 통과해야 Submit : v-form 에 ref="form" 기재
• :rules : 가져올 규칙명을 입력

<v-form ref="form" @submit.prevent="login">
  <v-text-field
    :rules="emailRule"
  />
</v-form>

<script lang="ts">
data: () => ({
  email: "",
  password: "",
  passwordShow: false,
  autoLoginCheckBox: false,
  emailRule: [
    (v) => !!v || "이메일을 입력해주세요.",
    (v) => {
      const replaceV = v.replace(/(\s*)/g, "");
      const pattern =
        /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/;
      return pattern.test(replaceV) || "이메일 형식으로 입력해주세요";
    },
  ],
  passwordRule: [
    (v) => !!v || "비밀번호를 입력해주세요.",
    (v) => {
      const replaceV = v.replace(/(\s*)/g, "");
      return replaceV.length >= 8 || "8자리 이상 입력해주세요.";
    },
  ],
});
</script>

• Submit 시에는 this.$refs.form.validate() 로 유효성 체크 결과 확인 가능

<script>
methods:{
    async login(){
      const validate = this.$refs.form.validate()
      if (validate){
        const email = this.email.replace(/(\s*)/g, '')
        const password = this.password.replace(/(\s*)/g, '')
        await this.$store.dispatch('LOGIN', { email, password, saveLogin:this.autoLoginCheckBox })
      }
    }
  }
</script>

1-2. Quasar 유효성 체크

• q-form 에 ref 값 지정
  • :rules="[user_pw_rules]" : script 에서 처리할 함수 user_pw_rules 기재

<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>

1-2-1. rules

• 유효성 체크에 위반되는 경우, 빨간 테두리가 생기면서 하단에 에러 문구가 출력되는 것이 디폴트 동작
• boolean 함수/변수들을 넣을 수 있으나, async-await(Promise)는 넣을 수 없음
• 아래와 같이 rules 에 바로 유효성 체크 로직을 추가할 수 있음

:rules="[val => val.length <= item.maxLength || `${item.maxLength}자를 초과했습니다.`]"

:rules="[val => !getNotNullYn(val, item) || '필수로 입력되어야 합니다.'
    , val => { let textLength = getTextLength(val);
          return textLength <= item.maxLength || `${item.maxLength}자를 초과했습니다.`} ]"

1-2-2. 실제 활용한 소스

<q-form ref="updateForm">
    <q-input
			v-if="item.type === 'text'"
			type="text"
			:rules="[val => !getNotNullYn(val, item) || '필수로 입력되어야 합니다.'
					    , val => { let textLength = getTextLength(val);
							return textLength <= item.maxLength || `${item.maxLength}자를 초과했습니다.`} ]"
			v-model="item.data"
		/>
		<q-input
			v-if="item.type === 'number'"
			type="number"
			:rules="item.maxLength && [val => val.length <= item.maxLength || `${item.maxLength}자를 초과했습니다.`]"
			v-model="item.data"
		/>
    <q-btn label="추가" @click="updateInfo('1', clickedRow)" />
</q-form>

<script setup>
const updateForm = ref(null); // 입력/수정 폼


const updateInfo = async (type, updatedRow) => {
	const valid = await updateForm.value.validate(); // 유효성 검사 결과를 담음

	if (!valid) {
		$q.notify({ color: 'negative', message: '유효한 값이 아닙니다.' });
		return;
	}

	const bmigHeaders = new Headers();
	bmigHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

  // 중략 (Submit 하는 과정)
};
</script>

2. Vue Event

2-1. Vue Event

• Vue.js의 이벤트 사용 방법 정리

이벤트명	설명
click	마우스를 클릭했을 때 실행함
dblclick	마우스를 더블 클릭했을 때 실행함
mouseover	마우스의 포인트가 요소 위로 올라왔을 때 실행함
mouseout	마우스의 포인트가 요소 밖으로 벗어났을 때 실행함
mousemove	마우스의 포인트가 이동했을 때 실행함
mousedown	마우스의 버튼을 눌렀을 때 실행함
mouseup	마우스의 버튼을 놓았을 때 실행함
keydown	키보드의 키를 눌렀을 때 실행함
keyup	키보드의 키를 놓았을 때 실행함
keypress	키보드의 키를 눌렀다가 놓았을 때 실행함
change	요소가 변경될 때 실행함
submit	Form 이 제출될 때 실행함
reset	Form 이 재설정될 때 실행함
select	select 의 값이 선택되었을 때 실행함
focus	태그에 포커스가 있을 때 실행함
blur	태그에 포커스를 잃었을 때 실행함

2-2. Event 여러 개 사용

• Event 여러 개 사용 시 대괄호 안에서 콤마로 구분

<template>
  <div>
    <button @click="[method1(), method2()]">클릭 버튼</button>
  </div>
</template>