JavaScript / 사업자등록번호, 전화번호 유효성 검사하는 방법

사업자등록번호 유효성 검사

  • 사업자등록번호를 입력하고 전송할 폼을 만들고, 버튼 클릭 시 checkBrn() 함수를 호출한다.
<input type="text" name="brn" id="brn">
<input type="button" value="Check" onclick="checkBrn();">
  • 메시지를 출력할 공간을 만든다.
<p id="checkBrnMessage"></p>
  • 입력한 값을 변수 brn에 담는다.
var brn = document.getElementById( "brn" ).value;
  • 정규표현식 /^[0-9]{3}-[0-9]{2}-[0-9]{5}$/를 이용하여 유효성 검사를 한다.
  • 000-00-00000 형식이 맞으면 OK, 그렇지 않으면 NOT OK를 출력한다.
if ( /^[0-9]{3}-[0-9]{2}-[0-9]{5}$/.test( brn ) ) {
  document.getElementById( "checkBrnMessage" ).innerText = "OK";
} else {
  document.getElementById( "checkBrnMessage" ).innerText = "NOT OK";
}

정규표현식을 반복적으로 사용한다면, 아래처럼 변수에 담아도 된다.

var brnRe = /^[0-9]{3}-[0-9]{2}-[0-9]{5}$/;
if ( brnRe.test( brn ) ) {
  document.getElementById( "checkBrnMessage" ).innerText = "OK";
} else {
  document.getElementById( "checkBrnMessage" ).innerText = "NOT OK";
}
  • 이를 checkBrn() 함수로 만든다.
function checkBrn() {
  var brn = document.getElementById( "brn" ).value;
  if ( /^[0-9]{3}-[0-9]{2}-[0-9]{5}$/.test( brn ) ) {
    document.getElementById( "checkBrnMessage" ).innerText = "OK";
  } else {
    document.getElementById( "checkBrnMessage" ).innerText = "NOT OK";
  }
}
  • 전체 코드는 다음과 같다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      * {
        font-family: Consolas, monospace;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>
      <input type="text" name="brn" id="brn">
      <input type="button" value="Check" onclick="checkBrn();">
    </p>
    <p id="checkBrnMessage"></p>
    <script>
      function checkBrn() {
        var brn = document.getElementById( "brn" ).value;
        if ( /^[0-9]{3}-[0-9]{2}-[0-9]{5}$/.test( brn ) ) {
          document.getElementById( "checkBrnMessage" ).innerText = "OK";
        } else {
          document.getElementById( "checkBrnMessage" ).innerText = "NOT OK";
        }
      }
    </script>
  </body>
</html>

  • 형식에 맞게 입력하면 OK를 출력한다.

  • 형식에 맞지 않게 입력하면 NOT OK를 출력한다.

전화번호 유효성 검사

  • 000-0000-0000 형식의 전화번호인지 검사하고 싶다면 정규표현식을 /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/로 변경한다.
if ( /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/.test( brn ) ) {
  document.getElementById( "checkBrnMessage" ).innerText = "OK";
} else {
  document.getElementById( "checkBrnMessage" ).innerText = "NOT OK";
}
  • 010으로 시작하게 하려면 정규표현식을 /^010-[0-9]{4}-[0-9]{4}$/로 변경한다.
if ( /^010-[0-9]{4}-[0-9]{4}$/.test( brn ) ) {
  document.getElementById( "checkBrnMessage" ).innerText = "OK";
} else {
  document.getElementById( "checkBrnMessage" ).innerText = "NOT OK";
}

입력하는 순간 유효성 검사하기

  • jQuery를 이용하여 다음과 같이 하면, 폼을 선택하고 입력할 때마다 유효성 검사를 한다.
  • 즉, 010-0000-0000 형식이 되기 전까지는 NOT OK를, 입력을 마치는 순간 OK를 출력한다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      * {
        font-family: Consolas, monospace;
        font-size: 20px;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <p>
      <input type="text" name="brn" id="brn">
    </p>
    <p id="checkBrnMessage"></p>
    <script>
      $( '#brn' ).on( 'focus keyup', function() {
        var brn = document.getElementById( "brn" ).value;
        if ( /^010-[0-9]{4}-[0-9]{4}$/.test( brn ) ) {
          document.getElementById( "checkBrnMessage" ).innerText = "OK";
        } else {
          document.getElementById( "checkBrnMessage" ).innerText = "NOT OK";
        }
      } );
    </script>
  </body>
</html>
같은 카테고리의 다른 글
JavaScript / 데이터 타입 / 문자열(String)

JavaScript / 데이터 타입 / 문자열(String)

문자열(String) 문자열을 변수의 값으로 사용하려면 작은 따옴표(') 또는 큰 따옴표(")로 감쌉니다. var jb = 'Lorem ipsum dolor'; var jb = "Lorem ipsum dolor"; 문자열에 작은 따옴표가 있다면 큰 따옴표로, 큰 따옴표가 있다면 작은 따옴표로 감쌉니다. var jb = 'Lorem "ipsum" dolor.'; var jb = "Lorem 'ipsum' dolor."; 만약 작은 따옴표와 큰 따옴표가 같이 있다면 역슬래시를 이용합니다. var jb ...

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

.includes() .includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다. IE는 Edge부터 지원한다. 문법 string.includes( searchString, length ) searchString : 검색할 문자열로 필수 요소이다. 대소문자를 구분한다. length : 검색을 시작할 위치이다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 한다. 예제 abzcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z' ) zcd가 z를 포함하는지 검사한다. z를 포함하므로 true를 반환한다. 'abzcd'.includes( 'z', 2 ...

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. 예제 id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. <!doctype html> <html lang="ko"> ...

JavaScript / Object / Array.push(), Array.pop(), Array.unshift(), Array.shift() - 배열에 원소 추가/제거 하기

JavaScript / Object / Array.push(), Array.pop(), Array.unshift(), Array.shift() - 배열에 원소 추가/제거 하기

.push(), .pop(), unshift(), shift() .push()는 배열의 맨 끝에, .unshift()는 배열의 맨 앞에 원소를 추가합니다. .pop()은 마지막 원소를, .shift()는 맨 앞의 원소를 제거합니다. 예제 네 가지 속성을 비교하는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <script> ...

JavaScript / Object / document.getElementById()

JavaScript / Object / document.getElementById()

.getElementById() .getElementById()는 id의 값으로 특정한 값을 가진 요소를 가져옵니다. 문법 document.getElementById( 'id' ) id에는 가져오려는 요소의 id의 값을 넣습니다. 예를 들어 var jb = document.getElementById( 'xyz' ); 는 id의 값이 xyz인 요소를 가져와서 변수 jb에 저장합니다. 예제 id의 값이 ab인 요소를 가져와서 몇 가지를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

String() String()은 숫자를 문자열로 변환하는 함수입니다. 문법 String( object ) object : 숫자 또는 숫자를 값으로 하는 변수 등을 입력합니다. 예제 변수 c의 값은 숫자 1과 숫자 2를 더한 3입니다. 변수 d의 값은 문자 1과 문자 2를 더한 12입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / Math.log(), Math.log10(), Math.Log2()

JavaScript / Object / Math.log(), Math.log10(), Math.Log2()

Math.log(), Math.log10(), Math.Log2() Math.log() : 자연로그의 값을 반환합니다. Math.log10() : 상용로그의 값을 반환합니다. Math.Log2() : 밑이 2인 로그의 값을 반환합니다. 문법 Math.log( number) Math.log10( number ) Math.Log2( number) number에는 숫자가 들어갑니다. 0인 경우 -Infinity, 음수인 경우 NaN을 반환합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성

JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성

.URL .URL 속성으로 문서의 URL을 가져올 수 있습니다. 문법 document.URL 예제 문서의 URL을 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.URL : " + document.URL + "</p>" ); </script> </body> </html> JavaScript / Object / Location - URL 정보 가져오는 객체

JavaScript / 반복문 / while, do - while, for

JavaScript / 반복문 / while, do - while, for

자바스크립트 반복문에는 while, do - while, for 세가지가 있습니다. while 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 ...

JavaScript / 연산자 / 비교 연산자

JavaScript / 연산자 / 비교 연산자

변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 알아보겠습니다. == ==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉 5 == 5 도 참이고 '5' == 5 도 참입니다. != !=는 '같지 않다'입니다. === ===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 ...