Dev Day

JavaScript를 통한 사업자번호 유효성 체크 및 하이픈(-) 자동 추가하기

Nuxt프로젝트 진행을 하다 B2B의 경우 회원가입 시 사업자번호를 입력하도록 해야 하는데 유효성 체크를 하지 않으면 아무 값이나 입력하여 가입을 할 수 있는 변수가 생겼습니다.

그래서 사업자번호 규칙에 대해 알아보고 이 규칙을 통한 사업자번호 유효성 체크를 해보았습니다.

 

사업자번호 규칙

출처: http://seoulcredit.co.kr/business_id

 

원래 지금 다니고 있는 회사에서 B2B 서비스를 하기 때문에 사업자규칙은 인지하고 있었지만 복습 겸 다시 알아봤습니다.

결국 앞에 세자리는 국세청과 세무서 코드, 가운데 두 자리는 개인과 법인을 구분하며 법인에서도 영리, 비영리, 외국인 법인 등을 구분합니다. 마지막 다섯 자리 중 앞에서부터 네 자리는 과세, 면세, 법인 사업자별로 등록 또는 지정일자 순으로 사용 가능한 번호를 배정받습니다. 마지막 다섯 자리 중 마지막 한자리의 경우 사업자등록번호의 오류 검증을 위해 부여받은 특정 숫자입니다.

이 마지막 한자리로 사업자번호 유효성 체크가 가능합니다.

유효성 검증을 한 값이 마지막 한자리와 같다면 정상입니다.

 

사업자번호 유효성 검증

1. 사업자번호 10개의 숫자 중 마지막 한자리 숫자를 제외 한 9개의 숫자에 1,3,7,1,3,7,1,3,5 를 각각 곱한 뒤 전부 더해줍니다.

티스토리 블로그이니 카카오의 사업자번호로 테스트를 해보겠습니다.

120-81-47521의 사업자번호에 1,3,7,1,3,7,1,3,5 를 각각 곱한 뒤 전부 더해보면

(1*1) + (2*3) + (0*7) + (8*1) + (1*3) + (4*7) + (7*1) + (5*3) + (2*5) = 78

 

2. 사업자번호 뒤에서 두번째 자리와 인증키 마지막 값을 곱하고 10으로 나눈 후 위의 합과 추가로 더합니다.

2*5/10 = 1 (혹시나 소수점이 생긴다면 버려주세요)

1 + 78 = 79

 

3. 합계를 10으로 나머지 연산을 합니다.

79 % 10 = 몫(7), 나머지(9)

 

4. 10에서 나머지 값을 빼줍니다.

10 - 9 = 1

 

5. 사업자번호의 마지막 자리의 숫자와 위의 처리 값(현재는 1)이 같으면 사업자번호가 맞습니다.

120-81-47521 사업자번호의 마지막 자리 숫자 = 1

위 처리값 = 1

1 = 1 사업자번호 유효!

 

위 로직을 Nuxt.js에서 처리하면 아래와 같습니다.

// pages/index.vue

<template>
  <div>
    <input type="text" v-model="bizNum" maxlength="10">
    <button @click="bizNumCheck">
    btn
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bizNum : ''
    };
  },
  methods: {
    bizNumCheck() {
      this.checkVaildBizNum(this.bizNum)
      alert(this.checkVaildBizNum(this.bizNum))
    },

    checkVaildBizNum(number) {
      let numberMap = number.replace(/-/gi, '').split('').map(function (d) {
        return parseInt(d, 10);
      });

      if (numberMap.length === 10) {
        let keyList = [1, 3, 7, 1, 3, 7, 1, 3, 5];
        let chk    = 0;

        keyList.forEach(function (d, i) {
          chk += d * numberMap[i];
        });

        chk += parseInt((keyList[8] * numberMap[8]) / 10, 10);
        console.log(chk);
        console.log(numberMap[9])
        console.log((10 - (chk % 10)) % 10)
        return Math.floor(numberMap[9]) === ((10 - (chk % 10)) % 10);
      }

      return false;
    },

  },
};
</script>

<style scoped>
</style>

저는 사업자번호 유효성 체크만 하기엔 아쉬워 사용자가 입력 시 자동으로 하이픈이 생기게 해주고 싶었습니다.

 

input을 3개로 나누어 만드는 것과 고민했는데 일단은 한 개의 input에 번호를 받아 자동으로 하이픈(-)이 생기게 하는 것으로 만들어봤습니다.

 

사실 굳이 bizNumCheck() 라는 함수를 만들 필요까지는 없습니다만 checkVaildBizNum의 로직을 있는 그대로 표현하고자 일부러 따로 bizNumCheck()을 만들었습니다. 빼셔도 상관없습니다!

 

사업자번호 하이픈(-) 코드

// pages/index.vue

<template>
  <div>
    <input id="bizNum" type="text" v-model="bizNum" maxlength="12">
    <button @click="bizNumCheck">
    btn
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bizNum : ''
    };
  },
  mounted() {
    let bizNum = document.getElementById('bizNum');

    bizNum.onkeyup = function() {
      console.log(this.value);
      this.value = addAutoHyphen(this.value) ;
    }

    function addAutoHyphen(str) {
      str = str.replace(/[^0-9]/g, '');
      let tmp = '';
      if( str.length < 4){
        return str;
      }else if(str.length < 6){
        tmp += str.substr(0, 3);
        tmp += '-';
        tmp += str.substr(3);
        return tmp;
      }else if(str.length < 11){
        tmp += str.substr(0, 3);
        tmp += '-';
        tmp += str.substr(3, 2);
        tmp += '-';
        tmp += str.substr(5);
        return tmp;
      }

      return str;
    }
  },
  methods: {
    bizNumCheck() {
      this.checkVaildBizNum(this.bizNum)
      alert(this.checkVaildBizNum(this.bizNum))
    },

    checkVaildBizNum(number) {
      let numberMap = number.replace(/-/gi, '').split('').map(function (d) {
        return parseInt(d, 10);
      });

      if (numberMap.length === 10) {
        let keyList = [1, 3, 7, 1, 3, 7, 1, 3, 5];
        let chk    = 0;

        keyList.forEach(function (d, i) {
          chk += d * numberMap[i];
        });

        chk += parseInt((keyList[8] * numberMap[8]) / 10, 10);
        console.log(chk);
        console.log(numberMap[9])
        console.log((10 - (chk % 10)) % 10)
        return Math.floor(numberMap[9]) === ((10 - (chk % 10)) % 10);
      }

      return false;
    },
  },
};
</script>

<style scoped>
</style>

사업자번호는 총 10자리로 3자리 2자리 5자리의 규칙으로 구성되어 있습니다. 그래서 str.length가 각 < 4, <6, <11 일때 하이픈(-)이 들어가게 했습니다.

 

위 코드를 실행시키게 되면 아래와 같이 input에 사업자번호를 넣게 되어 있습니다.

숫자만 넣어도 정상적으로 하이픈(-)이 들어가는 것을 확인할 수 있습니다.

이후 버튼을 클릭해보면 사업자번호가 맞다면 true, 사업자번호가 아니라면 false를 alert로 띄워주게 됩니다.