반응형
전화번호나 휴대폰 번호의 정규식을 검색해 보았지만, '-' 이 꼭 포함되어야 하는 정규식은 찾을 수 없었다.
사용자가 꼭 '-' 을 입력할 수 있도록 필요한 정규식 패턴만 공부해서 작성해 본다.
사용되는 정규식 패턴
| 정규식 패턴 | 설명 |
| ^ | 문자열의 시작에서 일치 |
| $ | 문자열의 끝에서 일치 |
| (?: ) | ( ) 정규식 패턴에서 캡처 기능을 비활성화 |
| [0-9] | 0~9 사이 일치 |
| {2, 3} | 2개 이상, 3개 이하 연속으로 일치 |
HTML 코드
간단하게 테스트 할 수 있도록 전화번호 입력란과 결과를 확인 할 수 있는 버튼을 만들어 주었다.
클릭 할 때 fnCheck 함수를 실행할 수 있도록 하였다.
<body>
<input type="text" id="phone" placeholder="xxx-xxxx-xxxx">
<button onclick="fnCheck(); return false;"> 결과 확인 </button>
</body>
JavaScript 코드
0~9까지 2,3 개를 포함되게 시작하며 다음으로 ' - ' 포함되게 한다.
0~9까지 3,4 개를 포함하며 다음으로 ' - ' 포함되게 한다.
0~9까지 3,4 개를 포함하며 끝난다.
phone이라는 id 값을 가져와 정규식에 맞는지 테스트하여 맞으면 true, 틀리면 false를 반환하는 fnCheck 함수를 만들었다.
// 전화번호 정규식 작성
var regex = /^(?:[0-9]{2,3})(?:[-]{1})(?:[0-9]{3,4})(?:[-]{1})(?:[0-9]{3,4})$/;
// 정규식 검사
function fnCheck() {
// 전화번호 값
var telVal = document.getElementById("phone").value;
// 전화번호 형식이 아닌 경우
if( !regex.test(telVal) ){
alert("전화번호를 정확히 입력하여 주십시오.");
return false;
}
// 전화번호 형식인 경우
alert("전화번호입니다.");
return true;
}
더 좋은 방법이 있겠지만, 그건 차차 공부하면서 수정해 나가면 될 거 같다.
이상, 오늘도 밤톨만큼 코딩했다.
참고
반응형
'코딩 > JavaScript' 카테고리의 다른 글
| [JavaScript] 수정한 JS 파일이 브라우저에서 적용이 안 될 때 | 쿠키 삭제 (0) | 2022.11.27 |
|---|---|
| [JavaScript] click 함수를 사용하여 파일 선택 창을 열어보자 (0) | 2022.11.23 |