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

예전에 작성했던 https://hjh0827.tistory.com/24?category=1006835 이후로 2탄을 준비하고 있었는데 이제야 글을 쓰게 되네요 이번 2탄으로 개인정보 영역을 작성해보도록 하겠습니다.

 

* vue를 쓰면 error코드를 데이터 바인딩 형식으로 노출하지만 다른 방식을 요청하는 클라이언트도 있기때문에 지난 회원가입 1탄과 다르게 이번 error코드는 다음페이지 버튼 클릭시 체크하는걸로 적용할 예정입니다. 

회원가입 flow

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

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

 

개인정보(이름 / 생년월일 / 성별 / 이메일 / 주소 / 휴대폰)

이름

HTML 영역

 

input 정보엔 v-model로 signup.name 정보를 전달하고 길이를 20으로 제한하고 error 코드는 v-if 조건으로 노출합니다.

        <h3 class="join_title">이름</h3>
        <span class="ps_box box_right_space">
          <input
            class="int"
            v-model="signup.name"
            type="text"
            placeholder="이름을 입력해주세요"
            maxlength="20"
          />
        </span>
        <span class="error_next_box" v-if="checkFlag && !signup.name"
          >이름을 입력하세요</span
        >

SCRIPT 영역

 

별도의 스크립트 내용 없습니다.

 

생년월일

HTML 영역

 

년 / 월은 select로 적용하고 일은 input으로 생성했습니다. input은 이전글 https://hjh0827.tistory.com/18 에서 숫자 입력 제어를 이용해서 input은 text로 설정하고 oninput 적용하여 숫자만 입력하도록 적용하였습니다.

      <h3 class="join_title">생년월일</h3>
        <div class="bir_wrap">
          <div class="bir_yy">
            <span class="ps_box">
              <select id="mm" class="sel" v-model="signup.yyyy">
                <option value="">년</option>
                <option
                  v-for="(item, index) in yyyyList"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.text }}
                </option>
              </select>
            </span>
          </div>
          <div class="bir_mm">
            <span class="ps_box">
              <select id="mm" class="sel" v-model="signup.mm">
                <option value="">월</option>
                <option
                  v-for="(item, index) in mmlist"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.text }}
                </option>
              </select>
            </span>
          </div>
          <div class=" bir_dd">
            <span class="ps_box">
              <input
                v-model="signup.dd"
                placeholder="일"
                type="text"
                class="int"
                maxlength="2"
                oninput="javascript: this.value = this.value.replace(/[^0-9]/g, '');"
              />
            </span>
          </div>
        </div>
        <span
          class="error_next_box"
          v-if="checkFlag && (!signup.yyyy || !signup.mm || !signup.dd)"
          >생년월일을 입력하세요</span
        >

SCRIPT 영역

 

년 데이터는 현재 년도부터 -100년까지 select 데이터로 넣었고 월은 1~12월까지 넣었습니다.

 

  created() {
    const nowYear = new Date().getFullYear();
    for (let i = 0; i < 100; i++) {
      let date = nowYear - i;
      this.yyyyList.push({ value: date, text: date });
    }

    for (let i = 1; i < 13; i++) {
      this.mmlist.push({
        value: i,
        text: i,
      });
    }
  },

 

성별

HTML 영역

 

성별은 select 로 생성하였습니다.

      <h3 class="join_title">성별</h3>
        <span class="ps_box gender_code">
          <select class="sel" v-model="signup.gender">
            <option value="">성별</option>
            <option
              v-for="(item, index) in genderList"
              :key="index"
              :value="item.value"
            >
              {{ item.text }}
            </option>
          </select>
        </span>
        <span class="error_next_box" v-if="checkFlag && !signup.gender"
          >성별을 선택하세요</span
        >

SCRIPT 영역

 

data는 array로 등록했습니다.

   data() {
    return {
      genderList: [
        {
          value: "M",
          text: "남성",
        },
        {
          value: "F",
          text: "여성",
        },
      ],
    };

이메일

HTML 영역

      <h3 class="join_title">
          <label for="email">이메일<span class="terms_choice"></span></label>
        </h3>
        <span class="ps_box int_email box_right_space">
          <input
            type="text"
            v-model="signup.email"
            placeholder="이메일을 입력해주세요"
            class="int"
            maxlength="100"
            @focus="checkFlag = false"
          />
        </span>
        <span class="error_next_box" v-if="checkFlag && !signup.email"
          >이메일을 입력해주세요</span
        >

 

주소

HTML 영역

      <h3 class="join_title">주소</h3>
        <span class="ps_box box_right_space">
          <input
            type="text"
            class="int"
            v-model="signup.address"
            placeholder="주소를 입력해주세요"
            maxlength="100"
            @focus="checkFlag = false"
          />
        </span>
        <span class="error_next_box" v-if="checkFlag && !signup.address"
          >주소를 입력해주세요</span
        >

 

휴대폰

HTML 영역

      <h3 class="join_title">휴대폰번호</h3>
        <span class="ps_box box_right_space">
          <input
            class="int"
            v-model="signup.phoneNum"
            type="text"
            placeholder="휴대폰 번호를 입력해주세요"
            maxlength="11"
            @focus="checkFlag = false"
          />
        </span>
        <span class="error_next_box" v-if="checkFlag && !signup.phoneNum"
          >휴대폰 번호를 입력해주세요</span
        >
      </div>

 

다음페이지

HTML 영역

      <button type="button" class="btn_type btn_primary" @click="goNextPage">
        <span>다음 페이지</span>
      </button>

SCRIPT 영역

 

checkFlag는 다음페이지 버튼 눌렀을때 true로 변경하여 error 노출되도록 제어하고 signup 데이터 빈값체크후 다음 페이지로 이동합니다.

    isEmpty(data) {
      if (data === "" || data === null || data === undefined) {
        return true;
      } else {
        return false;
      }
    },
    goNextPage() {
      this.checkFlag = true;
      if (
        !this.isEmpty(this.signup.name) &&
        !this.isEmpty(this.signup.yyyy) &&
        !this.isEmpty(this.signup.mm) &&
        !this.isEmpty(this.signup.dd) &&
        !this.isEmpty(this.signup.gender) &&
        !this.isEmpty(this.signup.email) &&
        !this.isEmpty(this.signup.address) &&
        !this.isEmpty(this.signup.phoneNum)
      ) {
        this.$router.push({ name: "signup3", params: { signup: this.signup } });
      }
    },

 

테스트 화면

 

개발 소스 GIT 주소

https://github.com/hjh830827/signup

hjh830827/signup