VUE 로그인 input validation

id, password만 입력하는 간단한 로그인 화면을 vue에서는 어떻게 validation 하는지 확인해봅시다. 

 

우선 테스트 코드 html 입니다. 

userId, passwd 라는 input 과 로그인 button 이 있습니다. 

<div class="login-form">
  <div class="login-row">
    <input type="text" :placeholder="아이디입력해라" v-model="userId" @keydown.enter.prevent="loginProcess"/>
    <p class="error" v-show="userIdNo">id없음</p>
    <p class="error" v-show="userLen">적어도4자리</p>
  </div>
  <div class="login-row">
    <input type="password" :placeholder="패스워드입력해라" v-model="passwd" @keydown.enter.prevent="loginProcess" @input="resetErrors"/>
    <p class="error" v-show="passwdNo">패스워드없음</p>
    <p class="error" v-show="passwdLen">자릿수체크</p>
  </div>
</div>

 <div class="login-btn">
  <button type="button" @click="loginProcess">로그인</button>
</div>

 

 

 

보통 jsp에서 사용하는 input에서는 name이나 id 속성을 사용하여 해당 input을 컨트롤 하는데

vue에서는 v-model 이라는 속성으로 input 을 컨트롤 합니다. 

 

앞에 v- 가 붙으면 vue에서 사용하는 속성인 것 같습니다. 

 

v-show는 true면 해당 element를 보여주고 false면 보여주지 않는다고 합니다. 

v-show="userIdNo" 라는 것은 userIdNo 가 true이면 "id없음" 이라는 p태그를 보여주고 

false면 안 보여줍니다. true인지 false 인지는 아래의 스크립트에서 설정해주면 됩니다. 

 

그리고 스크립트에서 사용하는 이벤트들은 @를 앞에 붙여 사용 합니다. 

위에서는 @keydown.enter.prevent 라던지, @click 이 있습니다. 

@keydown.enter.prevent 은 해당 input값을 입력 후 엔터 처리시에 발생되는 이벤트며 

@click은 말그대로 로그인 버튼을 클릭했을 때 발생합니다. 

 

그리고 이벤트 안에 있는 loginProcess 라는 함수를 스크립트에서 사용합니다. 

 

@input은 해당 input값의 데이터에 변경이 있을 때마다 발생됩니다. 

 

import {reactive} from "vue";
import axios from "axios";

    export default {
        data() {
            return {
                userId: '',
                passwd: '',
                userIdNo: false,
                userLen: false,
                passwdNo: false,
                passwdLen: false
            };
        },
        methods: {
            resetErrors() { 
                this.userIdNo = this.userId.trim() === '' && this.passwd.trim() !== '';
            },
            loginProcess(event) {
                this.userIdNo = !this.userId;
                this.userLen = this.userId.length < 4;
                this.passwdNo = !this.passwd;
                this.passwdLen = this.passwd.length < 4;
            }
        }
    }

 

 

가장 간단하게 필요한 부분만 뽑아봤습니다. 

위 형태가 가장 간단한 형태이고 export default 안에 보통 선언됩니다. 

 

첫 번째로 data() 안에서는 이 페이지에서 쓰는 객체 변수들을 선언합니다. 

여기서는 input 의 v-model 값이었던 userId, passwd 값을 선언하고

나머지는 v-show 값을 선언하였습니다. 

 

methods 에서 html에서 @ 이벤트들을 선언하여 사용하는데요.

passwd input에 @input="resetErrors" 를 여기서 사용합니다. 

 

여기서는 v-show로 설정했던 userIdNo 의 true/false 값을 위해 

userId가 없고 passwd가 있으면 true, 그게 아니면 false로 되어 있습니다. 

 

loginProcess 에서는 로그인 버튼 클릭시 발생하는 이벤트 입니다. 

여기서도 v-show로 지정했던 객체 변수들에 대해서 true/false 값을 지정하였습니다. 

 

 

정리하고 보니 간단해보이지만, vue 첫 경험자로써 이것도 처음엔 어버버 했습니다.

뭔가 두려움이 일지만 이것도 차근차근 해보면 더 많은 지식을 알게 되지 않을까 싶습니다. 

더 많은 어려움이 있겠지만 하나씩 해결해보도록 하겠습니다. 

 

아, 그리고 참고로 위 정보는 정확한 정보가 아닐 수 있으므로 참고만 하시길 바랍니다.