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>

Related Posts

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다. 예제 1 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다. Register를 클릭하면 ok.html로 이동합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / document.write()

JavaScript / Object / document.write()

.write() .write()은 문서에 문자, 코드 등을 쓰는 메서드입니다. 문법 document.write( exp1, exp2, ... ) 예제 Hello와 World를 연달아 출력합니다. document.write( 'Hello', 'World' ); 2를 출력합니다. document.write( 1+1 ) 코드는 코드로 인식합니다. document.write( '<p style="font-size: 80px; text-align: center;">Hello</p>' ); 닫는 script 태그에는 \를 붙여서 <\/script>로 씁니다. document.write( '<script>document.write( "Hello" )<\/script>' ); JavaScript / Object / document.writeln()

JavaScript / Object / Array.length / 배열의 길이 반환하는 속성

JavaScript / Object / Array.length / 배열의 길이 반환하는 속성

.length .length는 배열의 길이를 반환하는 속성입니다. 마지막 원소의 인덱스 값보다 1 큰 수를 반환합니다. 배열에 속한 원소의 개수와는 의미가 다릅니다. 문법 array.length 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; font-style: italic; } </style> </head> <body> <script> var jbAry1 = ; document.write( '<p>jbAry1.length : ' ...

JavaScript / 요소 추가하기 / .createElement(), .createTextNode(), .appendChild()

JavaScript / 요소 추가하기 / .createElement(), .createTextNode(), .appendChild()

자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다. .createElement() .createTextNode() .appendChild() .createElement()는 요소를 만듭니다. 예를 들어 .createElement( 'h1' ) 은 다음과 같은 코드를 생성합니다. <h1></h1> .createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어 .createTextNode( 'My Text' ) 는 My Text라는 문자열을 만듭니다. .appendChild()는 선택한 요소 안에 자식 요소를 추가합니다. 다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다. <!doctype html> <html ...

JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()

JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()

encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent() encodeURI() : 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수입니다. encodeURIComponent() : 모든 문자를 인코딩하는 함수입니다. decodeURI() : encodeURI()로 인코딩한 문자열을 디코딩하는 함수입니다. decodeURIComponent() : encodeURIComponent()로 인코딩한 문자열을 디코딩하는 함수입니다. 문법 encodeURI( uri ) encodeURIComponent( uri ) decodeURI( uri ) decodeURIComponent( uri ) uri : 인코딩하려는 인터넷 주소를 입력합니다. 예제 특수문자와 한글을 포함한 URI를 인코팅, ...

JavaScript / 함수 / 함수 선언하고 호출하기

JavaScript / 함수 / 함수 선언하고 호출하기

함수 선언하기 방법 1 function functionName( argument1, argument2, ... ) { // Do Something } 방법 2 var functionName = function( argument1, argument2, ... ) { // Do Something }; 함수 호출하기 functionName( value1, value2, ... ); 방법 1로 함수를 선언한 경우, 함수 호출은 함수 선언 전 또는 함수 선언 후에 할 수 있습니다. functionName( value1, value2, ... ...

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 / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수

JavaScript / 함수 / isFinite() / 매개변수가 유한한 수인지 검사하는 함수

isFinite() isFinite()은 매개변수가 유한값인지 검사하는 함수입니다. 문법 isFinite( value ) value : 검사할 값을 입력합니다. 유한한 숫자이면 true, 무한한 숫자 또는 숫자가 아니면 false를 반환합니다. 예제 123.123은 유한한 숫자이므로 true를 반환합니다. Infinity는 무한한 숫자이므로 false를 반환합니다. Not a Number는 문자이므로 false를 반환합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / String.substring() / 문자열 추출하는 메서드

JavaScript / Object / String.substring() / 문자열 추출하는 메서드

.substring() .substring()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substring( start, end ) start와 end로 문자열에서 골라낼 부분의 처음과 끝을 지정합니다. 예를 들어 var str = '123456789'; document.write( str.substring( 1, 4 ) ); 는 234를 출력합니다. start 값은 필수이며, end 값이 지정되지 않으면 문자열의 끝까지를 의미합니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...