Vue3.js - 회원가입 유효성 검사

 

templat

 

<div class="joinMain">
    <el-alert
      title="회원 가입을 축하드립니다.."
      type="success"
      show-icon
      center
      v-show="value"
    ></el-alert>
    <div class="header">MJCrossShot</div>
    <div class="joinText">회원가입</div>

    <div>
      <el-input
        placeholder="아이디"
        v-model="userDatas.memId"
        clearable="true"
        maxlength="20"
      ></el-input>
      <p v-show="errorMemId" class="input-error">
        아이디는 영문, 숫자를 포함한 4자이상 20자 이내이여야 합니다.
      </p>
    </div>
    <div>
      <el-button round class="ckbutton" clearable="true" @click="idCheck()"
        >중복체크</el-button
      >
    </div>
    <div>
      <el-input
        placeholder="비밀번호"
        v-model="userDatas.pwd"
        clearable="true"
      ></el-input>
      <p v-show="errorPwd" class="input-error">
        비밀번호는 영문 + 숫자를 포함한 4자이상 20자 이내이여야 합니다.
      </p>
    </div>
    <div>
      <el-input
        placeholder="이름"
        v-model="userDatas.username"
        clearable="true"
      ></el-input>
      <p v-show="errorUsername" class="input-error">
        이름이 올바르지 않습니다.
      </p>
    </div>
    <div>
      <el-input
        placeholder="이메일"
        v-model="userDatas.email"
        clearable="true"
      ></el-input>
      <p v-show="errorEmail" class="input-error">
        이메일 형식이 올바르지 않습니다. 다시 한번 확인 해주세요
      </p>
    </div>
    <div>
      <el-input
        placeholder="휴대전화번호 ( -  생략하고 입력)"
        v-model="userDatas.phone"
        clearable="true"
      ></el-input>
      <p v-show="errorPhone" class="input-error">
        휴대전화번호 형식이 올바르지 않습니다.
      </p>
    </div>

    <el-button
      type="info"
      :disabled="memId && pwd && username && email && phone === ''"
      @click="join()"
      >가입하기</el-button
    >

 

 

v-show boolean데이터로 제어한다. 기본값 false

 

 

watch

 `v-model`로 걸어둔 변수랑  input창이 변하는것을 `watch`로 감시하고 변경이되면 `methods`가 실행된다. 따라서 실시간으로 이메일 형식이 맞는지 판단할 수 있다.

 

'userDatas.memId': function () {
      this.checkId()
    },

    'userDatas.pwd': function () {
      this.checkPwd()
    },

    'userDatas.username': function () {
      this.checkUsername()
    },

    'userDatas.email': function () {
      this.checkemail()
    },

    'userDatas.phone': function () {
      this.checkPhone()
    }

 

methods

 checkId() {
      // 아이디 형식 검사
      const validateId = /^[A-Za-z0-9]{4,12}$/

      if (!validateId.test(this.userDatas.memId) || !this.userDatas.memId) {
        this.errorMemId = true
        return
      }
      this.errorMemId = false
    },

    checkPwd() {
      // 비밀번호 형식 검사
      const validateId = /^[A-Za-z0-9]{4,12}$/

      if (!validateId.test(this.userDatas.pwd) || !this.userDatas.pwd) {
        this.errorPwd = true
        return
      }
      this.errorPwd = false
    },

    checkUsername() {
      // 이름 형식 검사
      const validateId = /^[A-Za-z가-힣]{1,6}$/

      if (
        !validateId.test(this.userDatas.username) ||
        !this.userDatas.username
      ) {
        this.errorUsername = true
        return
      }
      this.errorUsername = false
    },

    checkemail() {
      // 이메일 형식 검사
      const validateId =
        /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i

      if (!validateId.test(this.userDatas.email) || !this.userDatas.email) {
        this.errorEmail = true
        return
      }
      this.errorEmail = false
    },

    checkPhone() {
      // 휴대전화번호 형식 검사
      const validateId = /^01([0|1|6|7|8|9]?)?([0-9]{3,4})?([0-9]{4})$/

      if (!validateId.test(this.userDatas.phone) || !this.userDatas.phone) {
        this.errorPhone = true
        return
      }
      this.errorPhone = false
    }

 

입력 형식에 틀리거나 빈칸이면 true 를 반환해 에러문구가 뜨게 된다. 여기서 .test 메서드는 어진 문자열이 정규 표현식을 만족하는지 판별하고,  그 여부를 true 또는 false 로 반환한다.

 

/^[A-Za-z0-9]{4,12}$/ : 대문자 : A ~ Z , 소문자 :  a ~ z 숫자 : 0 ~ 9 (4자 이상 12자이하) 

 

/^[A-Za-z가-힣]{1,6}$/ : 대문자 : A ~ Z , 소문자 :  a ~ z  한글 : 가 ~ 힣 한글로만 이뤄진 문자 (1자 이상 6자이하) 

 

/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i : 특수문자 가능하고 가운데 @ 필수 @뒤에 글자 2~3 글자 필요 

 

/^01([0|1|6|7|8|9]?)?([0-9]{3,4})?([0-9]{4})$/ : - 생략 01?(3글자)  

 

 

 

 

출처 : https://velog.io/@yejine2/TIL-46-Vue-%EC%9C%A0%ED%9A%A8%EC%84%B1%EA%B2%80%EC%82%AC

정규식 출처 :  https://m.blog.naver.com/PostView.naver?blogId=vnemftnsska2&logNo=221413061386&referrerCode=0&searchKeyword=test%ED%95%A8%EC%88%98