vue.js - jquery 없이 만들어 보는 회원 가입 1탄

요새 vue.js를 공부하다보니 jquery 없이 충분히 개발을 할수 있을것 같다는 생각에 간단한 회원 가입 화면을 만들어 보려고 합니다. 바로 시작하겠습니다.

 

회원가입 flow

• 1p - 가입 정보(아이디, 비밀번호, 비밀번호 힌트)
• 2p - 개인정보(이름, 전화번호, 이메일)
• 3p - 부가정보(직업, 관심분야, 메일/sns 정보수신, 가입경로)

회원가입 진행을 3페이지로 진행할 예정입니다. 사실 페이지 1개로 해도 되지만 페이지 이동 및 데이터 이동 등등을 같이 해보기 위해 진행하려고 합니다.

* vue.js의 기본 포맷은 알고 있다는 가정하에 진행하도록 하겠습니다.

 

가입정보(아이디, 비밀번호, 비밀번호 힌트)

• 아이디

HTML 영역

    <tr>
      <th>아이디</th>
      <td>
        <input v-model="signup.id" type="text" maxlength="20">
        <div v-if="!idValid">
          유효하지 않은 아이디 입니다.
        </div>
      </td>
    </tr>

input 정보엔 v-model로 signup.id 정보를 전달하고 길이를 20으로 제한

div 정보는 if문을 이용해서 노출

 

SCRIPT 영역

data () {
    return {
      signup: {
        id: null,
        password: null,
        pwhint: '',
        pwhintans: null
      }
  },
  computed: {
    idValid () {
      return /^[A-Za-z0-9]+$/.test(this.signup.id)
    }
  }

 

v-model에 선언한 signup.id는 입력시 자동으로 data의 signup.id 에 set

computed에 선언한 idValid은 signup.id 값 변경시 실행

inValid의 영문/숫자 입력 체크는 정규식을 이용하여 체크

 

 

• 비밀번호

HTML 영역

    <tr>
      <th>비밀번호</th>
      <td>
        <input v-model="signup.password" type="password" maxlength="16" @blur="passwordValid">
        <div v-if="!passwordValidFlag">
          유효하지 않은 비밀번호 입니다.
        </div>
      </td>
    </tr>

input 정보엔 v-model로 signup.password 정보를 전달하고 길이를 16으로 제한

blur를 사용하여 비밀번호를 입력 후에 하단 passwordValidFlag 정보를 변경

div 정보는 if문을 이용해서 노출

 

SCRIPT 영역

data () {
    return {
      signup: {
        id: null,
        password: null,
        pwhint: '',
        pwhintans: null
      },
      passwordValidFlag: true
    }
  },
  methods: {
    passwordValid () {
      if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,16}$/.test(this.signup.password)) {
        this.passwordValidFlag = true
      } else {
        this.passwordValidFlag = false
      }
    }
  }

v-model에 선언한 signup.password는 입력시 자동으로 data의 signup.password 에 set

computed에 선언한 idValid은 signup.id 값 변경시 실행

passwordValid는 정규식을 이용하여 대문자 / 소문자 / 숫자가 1개 이상 존재하고 8자이상 16자 이하로 처리

 

* 영상은 확인을 위해 input type=text로 변경

 

• 비밀번호 확인

HTML 영역

    <tr>
      <th>비밀번호 확인</th>
      <td>
        <input v-model="passwordCheck" type="password" maxlength="16" @blur="passwordCheckValid">
        <div v-if="!passwordCheckFlag">
          비밀번호가 동일하지 않습니다.
        </div>
      </td>
    </tr>

input 정보엔 v-model로 passwordCheck정보를 전달하고 길이를 16으로 제한

 

blur를 사용하여 비밀번호를 입력 후에 하단 passwordCheckFlag정보를 변경

 

div 정보는 if문을 이용해서 노출

 

SCRIPT 영역

data () {
    return {
      signup: {
        id: null,
        password: null,
        pwhint: '',
        pwhintans: null
      },
      passwordCheck: '',
      passwordCheckFlag: true
    }
  },
  methods: {
    passwordCheckValid () {
      if (this.signup.password === this.passwordCheck) {
        this.passwordCheckFlag = true
      } else {
        this.passwordCheckFlag = false
      }
    }
  }

 

* 영상은 확인을 위해 input type=text로 변경

 

• 비밀번호 힌트

HTML 영역

    <tr>
      <th>비밀번호 힌트/답변</th>
      <td>
        <select v-model="signup.pwhint" size="1" class="select">
          <option value="">
            선택하세요
          </option>
          <option v-for="(item, index) in pwhintList" :key="index" :value="item.value">
            {{ item.text }}
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <th>답변</th>
      <td><input v-model="signup.pwhintans" type="text"></td>
    </tr>

힌트 select 영역은 v-model에 signup.pwhint로 데이터를 set

option영역은 pwhintList의 목록을 v-for를 이용하여 set

답변 영역은 input

 

• STEP2 페이지 이동

HTML 영역

    <tr>
      <td colspan="2" align="center">
        <input type="submit" value="다음 페이지" @click="goNextPage">
      </td>
    </tr>

input영역에 click이벤트를 주어 goNextPage 메소드 호출

 

SCRIPT 영역

data () {
    return {
      signup: {
        id: null,
        password: null,
        pwhint: '',
        pwhintans: null
      },
      passwordCheck: null,
      passwordValidFlag: true,
      passwordCheckFlag: true
    }
  },
  methods: {
    goNextPage () {
      if (this.signup.id == null || this.signup.password == null || this.signup.pwhint === '' || this.signup.pwhintans == null || this.passwordCheck == null) {
        alert('필수값 누락')
        return
      }
      if (!this.idValid || !this.passwordValidFlag || !this.passwordCheckFlag) {
        alert('유효성 확인')
        return
      }

      this.$router.push({ name: 'signup2', params: { signup: this.signup } })
    }
  }

data에 있는 값을 체크

유효한 데이터라면 $router.push를 이용하여 다음 페이지에 해당 데이터를 넘기면서 이동

 

* 영상은 확인을 위해 input type=text로 변경 - 영상이 정상 동작하지 않아 추후 업로드 예정

 

다음 2탄은 개인정보(이름, 전화번호, 이메일)로 돌아오겠습니다~

글에 관심이 많아지면 더 빠르게 올수 있을것 같은 예감..ㅎㅎ