Dev Day

Nuxt.js에서 JavaScript를 이용하여 Input 아이디,비밀번호,이메일 유효성 체크

Nuxt.js에서 웹 애플리케이션 개발 시 회원가입을 진행할 때 아이디,비밀번호,이메일 등 input 입력값을 검증하는 로직이 반드시 필요합니다.

이때 JavaScript와 정규식을 사용하여 해당 input에 대한 검증 메서드를 만들 수 있습니다.

지금 제가 진행하고 있는 프로젝트도 회원가입이 필요하여 회원가입 시 필요한 필드들에 대한 유효성 체크가 필요하여 해당 필드들의 유효성 체크에 대한 내용을 적어보려 합니다.

처음엔 손이 가는대로 jQuery로 진행했다가 아차 싶어서 다시 Vanilla script로 변경 했습니다.

 

아이디 유효성 체크하기

jQuery 사용을 최대한 지향하고 싶었으나 BootStrap을 통해 간단히 테스트 페이지를 만들었습니다.

 

// pages/test.vue

<template>
  <div>
    <div class="container">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">ID</span>
        </div>
        <input type="text" id="id" class="form-control" placeholder="아이디를 입력해주세요" @change="validateId" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    validateId() {
      let id = document.getElementById('id').value

      console.log(id)

      if (id.length < 6) {
        alert("아이디는 최소 6자리 이상입니다.")
        return false
      } else if (id.search(/\s/) !== -1) {
        alert("아이디에 공백은 불가능합니다.")
        return false
      } else {
        this.$axios.post("", id)
          .then(res => {
            if (res.data === true) {
              console.log("중복")
              return false
            } else if (res.data === false) {
              console.log("중복 아님")
              return true
            }
          })
      }
    },
  },
}
</script>

<style scoped>

</style>

아이디 유효성 검증을 위해 간단한 input에 아이디를 입력하는 화면을 만들었습니다.

그리고 해당 input이 변경됨을 감지하여 validateId()를 호출하도록 했습니다.

input값의 길이를 가지고 아이디의 최소 자릿수를 검증하며, 정규식을 통해 혹시나 아이디값에 띄어쓰기가 있는지 검증합니다.

이 후 자릿수와 띄어쓰기 검증을 통과하면 axios로 백엔드와 통신하여 DB에 중복되는 아이디가 있는지 결과를 통신합니다.(예제에서는 post url은 공백으로 뒀습니다. 이 곳에 통신할 url을 넣어주시면 됩니다.)

 

위 소스를 실행시켜서 테스트를 진행해보면 아래와 같이 정상적으로 작동하는 것을 확인할 수 있습니다.

API 통신의 경우 직접 진행해보시면 됩니다!

 

비밀번호 유효성 체크하기

ID 유효성 체크한 소스에 아래의 코드를 추가합니다.

// pages/test.vue

<template>
  <div>
    <div class="container">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">ID</span>
        </div>
        <input type="text" id="id" class="form-control" placeholder="아이디를 입력해주세요" @change="validateId" />
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon2">Password</span>
        </div>
        <input type="password" id="password" class="form-control" placeholder="비밀번호를 입력해주세요." @change="validatePw" />
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3">CheckedPassword</span>
        </div>
        <input type="password" id="checkedPassword" class="form-control" placeholder="비밀번호를 입력해주세요." @change="validateCheckedPw"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    validateId() {
      let id = document.getElementById('id').value

      console.log(id)

      if (id.length < 6) {
        alert("아이디는 최소 6자리 이상입니다.")
        return false
      } else if (id.search(/\s/) !== -1) {
        alert("아이디에 공백은 불가능합니다.")
        return false
      } else {
        this.$axios.post("", id)
          .then(res => {
            if (res.data === true) {
              console.log("중복")
              return false
            } else if (res.data === false) {
              console.log("중복 아님")
              return true
            }
          })
      }
    },
    validatePw() {
      let pw = document.getElementById("password").value

      let number = pw.search(/[0-9]/g);
      let english = pw.search(/[a-z]/ig);
      let specialCharacter = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

      if (pw.length < 8 || pw.length > 20) {
        alert("8자리 ~ 20자리 이내로 입력해주세요.");
        return false;
      } else if (pw.search(/\s/) !== -1) {
        alert("비밀번호는 공백 없이 입력해주세요.");
        return false;
      } else if (number < 0 || english < 0 || specialCharacter < 0) {
        alert("영문,숫자, 특수문자를 혼합하여 입력해주세요.");
        return false;
      } else {
        console.log("통과");
        return true;
      }
    },
    validateCheckedPw() {
      let pw = document.getElementById("password").value
      let checkedPw = document.getElementById("checkedPassword").value

      let number = checkedPw.search(/[0-9]/g);
      let english = checkedPw.search(/[a-z]/ig);
      let specialCharacter = checkedPw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

      if (checkedPw.length < 8 || checkedPw.length > 20) {
        alert("8자리 ~ 20자리 이내로 입력해주세요.");
        return false;
      } else if (checkedPw.search(/\s/) !== -1) {
        alert("비밀번호는 공백 없이 입력해주세요.");
        return false;
      } else if (number < 0 || english < 0 || specialCharacter < 0) {
        alert("영문,숫자, 특수문자를 혼합하여 입력해주세요.");
        return false;
      } else if (pw !== checkedPw) {
        alert("비밀번호가 맞지 않습니다.")
      } else {
        console.log("통과");
        return true;
      }
    },
  },
}
</script>

<style scoped>

</style>

비밀번호의 경우 1차적으로 비밀번호를 입력하고 비밀번호 확인 input을 통해 1차에 입력한 비밀번호와 맞는지까지 검증을 해야합니다.

1차 입력 비밀번호의 경우 validatePw()를 통해 자릿수 검증, 공백 검증, 영문,숫자 특수문자 혼합 여부 검증을 합니다.

 

1차 비밀번호 입력 후 2차에서는 validateCheckedPw()를 통해 1차와 같은 검증 + 1차 입력 비밀번호와 같은지 체크를 합니다.

이메일 유효성 체크하기

마지막으로 이메일 유효성 체크에는 위 아이디, 비밀번호 유효성 체크 소스에 아래의 코드를 추가해줍니다.

// pages/test.vue

<template>
  <div>
    <div class="container">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">ID</span>
        </div>
        <input type="text" id="id" class="form-control" placeholder="아이디를 입력해주세요" @change="validateId" />
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon2">Password</span>
        </div>
        <input type="password" id="password" class="form-control" placeholder="비밀번호를 입력해주세요." @change="validatePw" />
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3">CheckedPassword</span>
        </div>
        <input type="password" id="checkedPassword" class="form-control" placeholder="비밀번호를 입력해주세요." @change="validateCheckedPw"/>
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon4">Email</span>
        </div>
        <input type="text" id="email" class="form-control" placeholder="이메일 주소를 입력해주세요." @change="validateEmail"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    validateId() {
      let id = document.getElementById('id').value

      console.log(id)

      if (id.length < 6) {
        alert("아이디는 최소 6자리 이상입니다.")
        return false
      } else if (id.search(/\s/) !== -1) {
        alert("아이디에 공백은 불가능합니다.")
        return false
      } else {
        this.$axios.post("", id)
          .then(res => {
            if (res.data === true) {
              console.log("중복")
              return false
            } else if (res.data === false) {
              console.log("중복 아님")
              return true
            }
          })
      }
    },
    validatePw() {
      let pw = document.getElementById("password").value

      let number = pw.search(/[0-9]/g);
      let english = pw.search(/[a-z]/ig);
      let specialCharacter = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

      if (pw.length < 8 || pw.length > 20) {
        alert("8자리 ~ 20자리 이내로 입력해주세요.");
        return false;
      } else if (pw.search(/\s/) !== -1) {
        alert("비밀번호는 공백 없이 입력해주세요.");
        return false;
      } else if (number < 0 || english < 0 || specialCharacter < 0) {
        alert("영문,숫자, 특수문자를 혼합하여 입력해주세요.");
        return false;
      } else {
        console.log("통과");
        return true;
      }
    },
    validateCheckedPw() {
      let pw = document.getElementById("password").value
      let checkedPw = document.getElementById("checkedPassword").value

      let number = pw.search(/[0-9]/g);
      let english = pw.search(/[a-z]/ig);
      let specialCharacter = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

      if (checkedPw.length < 8 || checkedPw.length > 20) {
        alert("8자리 ~ 20자리 이내로 입력해주세요.");
        return false;
      } else if (checkedPw.search(/\s/) !== -1) {
        alert("비밀번호는 공백 없이 입력해주세요.");
        return false;
      } else if (number < 0 || english < 0 || specialCharacter < 0) {
        alert("영문,숫자, 특수문자를 혼합하여 입력해주세요.");
        return false;
      } else if (pw !== checkedPw) {
        alert("비밀번호가 맞지 않습니다.")
      } else {
        console.log("통과");
        return true;
      }
    },
    validateEmail() {
      let email = document.getElementById("email").value

      const regExp = /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/

      if (email.search(/\s/) !== -1) {
        alert("이메일은 공백 없이 입력해주세요.")
        return false
      } else if (email.match(regExp) === null) {
        alert("이메일 형식이 맞지 않습니다.")
        return false
      } else {
        console.log("성공")
        return true
      }
    },
  },
}
</script>

<style scoped>

</style>

 

이메일 유효성 체크에는 공백 여부, test@test.com 이나 test@test.co.kr 등의 이메일 형식의 유효성 체크가 있습니다.

정상적으로 이메일 입력 시 성공하는 것을 확인할 수 있습니다.

 

아이디에도 특수문자 여부 등 추가로 검증해야 하지만 간단히 진행해보았습니다.

혹시라도 이상한 내용이 있으면 댓글로 남겨주세요!