자바스크립트를 사용하여 사용자가 입력한 텍스트가 핸드폰 번호 형식에 부합하는지를 확인하는 방법을 알아보겠습니다.
정규 표현식을 사용한 방법
자바스크립트에서는 정규 표현식을 사용하여 문자열이 특정 패턴과 일치하는지 확인할 수 있습니다.
핸드폰 번호의 형식은 국가 번호를 포함한 숫자 형태를 갖습니다. 예를 들어, 한국의 핸드폰 번호는 '010-1234-5678' 또는 '01012345678'과 같은 형식을 가집니다. 이를 정규 표현식으로 표현하면 다음과 같습니다.
const phonePattern = /^\d{3}-\d{3,4}-\d{4}$/;- ^: 문자열의 시작을 나타냅니다.
- \d{3}: 3자리의 숫자를 의미합니다. 국가 번호를 나타냅니다.
- -: 국가 번호와 나머지 번호를 구분하는 하이픈(-)입니다.
- \d{3,4}: 3 또는 4자리의 숫자를 의미합니다. 핸드폰 번호의 중간 부분을 나타냅니다.
- \d{4}: 4자리의 숫자를 의미합니다. 핸드폰 번호의 마지막 부분을 나타냅니다.
- $: 문자열의 끝을 나타냅니다.
정규 표현식을 이용한 검증
이제 이 정규 표현식을 사용하여 사용자가 입력한 텍스트가 핸드폰 번호 형식인지 확인할 수 있습니다.
아래는 HTML과 JavaScript를 사용하여 입력한 데이터가 핸드폰 번호 형태인지를 체크하는 예시 코드입니다. 사용자가 입력한 데이터는 입력창에서 확인하며, 확인 버튼을 누르면 해당 입력이 핸드폰 번호 형식에 맞는지 확인됩니다.
See the Pen 핸드폰번호 유효성체크 by saladent (@saladent) on CodePen.
이상으로 자바스크립트를 사용하여 핸드폰 번호 형식을 확인하는 방법에 대해 알아보았습니다.