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>