정규식을 사용하여 JavaScript에서 전화번호 확인

플라톤에 의해 재발행

팔로워 : 0

개요

인지 여부와 관계없이 데이터는 일상 생활의 중요한 부분이 되었습니다. 온라인으로 음식을 주문하는 것부터 고양이 사료를 찾는 것까지 끊임없이 데이터를 주고받고 있습니다. 웹 애플리케이션 개발자로서 데이터베이스가 데이터를 올바르게 이해하고 애플리케이션이 견고하게 유지되도록 사용자 입력이 지정된 형식인지 확인하는 것은 우리의 책임입니다.

전화번호 유효성 검사는 데이터가 데이터베이스 전체에서 일관된 형식으로 저장되도록 하기 때문에 중요합니다. 예를 들어 사용자는 전화번호 앞에 국가 코드를 입력해야 하는지 여부에 대한 설명이 필요할 수 있습니다. 적절한 유효성 검사를 통해 사용자는 필요한지 쉽게 결정할 수 있습니다. 마찬가지로 사용자에게 기대하는 바를 알고 그에 따라 논리를 구현할 수 있으므로 일관된 형식으로 사용자 경험이 향상됩니다. 일관성 없는 데이터로 인해 나중에 코드가 깨지면 사용자에게 좋지 않은 경험이 될 것입니다.

정규식은 패턴 일치를 위한 강력한 도구입니다. 사용 사례에 따라 다양한 유형의 패턴을 일치시키는 유연성을 제공합니다. 또한 정규식은 언어에 구애받지 않으므로 핵심 유효성 검사를 쉽게 통합할 수 있으므로 유효성 검사 논리를 보다 이식성 있게 만듭니다. JavaScript에서 정규식으로 작업하는 것은 간단한 작업입니다.

이 문서는 정규식의 기능을 사용하여 애플리케이션의 전화 번호를 확인하는 방법을 이해하는 데 도움이 됩니다. 국가 코드로 전화 번호를 확인하는 간단한 JavaScript 함수를 작성합니다.

정규식이란 무엇입니까?

간단히 말해서 정규식은 주어진 문자열에서 미리 정의된 패턴과 일치합니다. 프로그래밍 언어에서 널리 사용되며 주로 특정 형식의 입력을 검증하는 데 사용됩니다. 또한 정규식은 일반적으로 지정된 패턴을 검색, 분할 및 대체하는 데 사용됩니다.

문서에서 이메일 주소를 찾고 싶다고 가정해 보겠습니다. 이메일 주소는 특정 주소가 아닌 모든 주소가 될 수 있습니다. 이메일 주소의 구조를 이미 알고 있기 때문에 간단한 표현식을 작성하면 패턴을 빠르게 찾을 수 있습니다.

정규식은 특수 문자를 사용하여 다양한 유형의 패턴을 나타냅니다. 예를 들어:

. (점)은 모든 문자와 일치할 수 있는 특수 문자입니다.
* (별표)는 앞의 문자와 0번 이상 일치합니다.
+ (더하기)는 앞의 문자와 한 번 이상 일치합니다.
? (물음표)는 선행 문자를 선택 사항으로 만듭니다.
[abc] 모든 문자와 일치 a, b및 c.
(abc) 문자를 함께 그룹화합니다.
^ (캐럿)은 줄의 시작과 일치합니다.
$ (달러)는 줄의 끝과 일치합니다.

이들은 단지 몇 가지입니다. 더 깊이 파고들고 더 많은 패턴에 대해 알고 싶다면 다음을 참조할 수 있습니다. Microsoft의 이 문서.

주어진 숫자 집합이 XNUMX자리 우편번호인지 확인하는 정규식을 작성해 보겠습니다. 표현식 작성을 시작하려면 다음을 사용합니다. ^ (캐럿) 기호, 줄의 시작 부분과 일치합니다. 정규식에서 d 모든 숫자 및 중괄호 안의 숫자({}) 중괄호 안에 주어진 횟수만큼 앞의 요소와 정확히 일치합니다. 위의 목록에서 우리는 $ 행의 끝을 일치시키는 데 사용됩니다.

이 정보를 결합하면 다음과 같은 정규식을 얻습니다.

/^d{5}$/

이제 표현을 더 잘 이해하기 위해 아래 그래픽을 살펴보겠습니다.

XNUMX자리 우편번호와 일치하는 정규식

XNUMX자리 우편번호를 일치시키는 정규식

이제 정규식과 정규식의 일반적인 구성에 대한 기본적인 이해를 마쳤으므로 이러한 식을 JavaScript 함수에서 구현하는 방법을 살펴보는 것이 좋습니다.

자바스크립트 정규 표현식

자바스크립트는 가장 대중적인 프로그래밍 언어 개발자들 사이에서. 거의 모든 웹 응용 프로그램에는 JavaScript가 필요하므로 이 언어에서 정규식을 사용하는 방법을 이해하는 것이 중요합니다.

자바스크립트에서는 RegExp 객체는 패턴 일치에 사용됩니다. 이 개체는 두 가지 방법으로 사용할 수 있습니다.

두 개의 슬래시 사이에 패턴 형식이 지정되는 리터럴 표기법 사용
문자열 또는 RegExp 개체가 전달되었습니다

리터럴 표기법은 다음과 같이 간단하게 사용할 수 있습니다.

const expr = /^d{5}$/i;

반면에 생성자 표기법을 사용하면 다음을 사용해야 합니다. RegExp 그것의 인스턴스를 생성하는 생성자. 다음과 같이 표시됩니다.

const expr = new RegExp(/^d{5}$/, "i");

RegExp 개체에 대한 자세한 내용은 공식 MDN 문서. 이제 전화번호 확인의 중요성과 전화번호의 다양한 구성요소에 대해 살펴보겠습니다.

전화번호 확인 및 구성요소

데이터베이스에 전화번호를 저장할 때 클라이언트 측에서 전화번호를 확인하는 것이 중요합니다. 적절한 유효성 검사가 없으면 코드에 예기치 않은 동작이 나타날 수 있습니다.

모범 사례, 업계에서 인정하는 표준 및 포함된 치트 시트가 포함된 Git 학습에 대한 실습 가이드를 확인하십시오. 인터넷 검색 Git 명령을 중지하고 실제로 배움 이것!

예를 들어 전화번호와 함께 국가 코드가 필요한 서비스를 사용하고 있지만 사용자가 유효성 검사 부족으로 인해 국가 코드를 포함하지 않는다고 가정합니다. 이제 번호만 있으면 없이 이로 인해 국가 코드 및 SMS 문자 메시지를 보내는 서비스가 실패할 수 있습니다. 이것은 하나의 가상 시나리오에 불과합니다. 다른 문제로 인해 애플리케이션이 충돌할 수도 있습니다. 프런트엔드에서 데이터를 적절하게 처리하여 데이터베이스 전체에 깨끗하고 일관된 데이터를 저장하는 것이 중요합니다.

일반적으로 전화번호는 다음 네 부분으로 구성됩니다.

국가 코드: 처음 1~3자리(국가에 따라 다름)는 전화번호의 국가를 정의합니다. 이 코드를 사용하면 통화를 올바른 국가로 라우팅할 수 있습니다. 국가 코드는 0으로 시작할 수 없습니다.

현재 편집 중인 문서의 제목은 "정규 표현식을 사용하여 JavaScript에서 전화번호 확인"입니다. 편집할 텍스트 덩어리:

지역 번호: 도시 또는 전화 걸기 번호라고도 하는 이 번호 부분은 국가 내의 정확한 지역으로 전화를 연결하는 데 도움이 됩니다. 미국과 같은 일부 국가에서는 지역 번호가 특정 서비스에 대한 특정 전화번호 집합을 나타낼 수도 있습니다. 또한 북미에서는 지역 코드가 0 또는 1로 시작할 수 없습니다.
전화 접두사: 이 일련의 번호는 전화 회사에서 특정 중앙 사무실이나 전화 교환기에 할당하여 특정 지리적 영역이나 이웃을 더욱 좁힙니다.
회선 번호: 접두사 영역 내에서 가정 또는 회사의 특정 전화 회선에 할당된 고유 번호입니다. 번호의 이 부분은 일반적으로 국가, 지역 및 접두사 내의 각 전화 번호가 고유하도록 합니다.

국가번호를 제외한 나머지 부분을 합치면 지역번호와 국번이 각각 XNUMX자리, 회선번호가 XNUMX자리인 XNUMX자리 전화번호가 됩니다.

이제 정규식을 사용하여 이러한 기준에 따라 전화번호를 확인하는 JavaScript 함수를 작성해 보겠습니다.

전화번호 확인을 위한 RegEx 만들기

우리는 이미 전화번호의 기본 구조를 이해했습니다. 또한 정규식과 JavaScript에서 정규식을 사용하는 방법에 대해서도 배웠습니다. 이 섹션에서는 주어진 형식의 전화 번호를 확인하는 간단한 JavaScript 함수를 작성합니다.

COUNTRY_CODE-AREA_CODE-TELEPHONE_PREFIX-LINE_NUMBER

예를 들어 우리 기능에 유효한 전화번호는 다음과 같습니다. +123-456-789-1234, 하지만 +012-123-456-7890 or +12-123-456-789, 이러한 전화번호는 앞에서 논의한 전화번호 규칙을 따르지 않기 때문입니다.

이제 정규식 작성에 들어가 봅시다. 먼저 국가 코드가 1~3자리이고 XNUMX으로 시작하지 않는지 확인하세요.

정규 표현식의 시작을 나타내려면 캐럿(^) 그런 다음 시작 부분에 플러스가 있는지 확인합니다. 이를 위해 다음을 사용합시다. +, 시작 부분에 더하기가 존재하는 것과 일치합니다. 이제 국가 코드의 숫자가 XNUMX~XNUMX자리이고 첫 번째 숫자가 XNUMX이 아닌지 확인하기 위해 다음과 같이 작성할 수 있습니다. [1-9]{1}[0-9]{0,2}. 이리, [1-9]{1} 1에서 9까지의 모든 숫자가 정확히 한 번만 존재할 수 있음을 지정합니다. [0-9]{0,2} 0에서 9까지의 숫자가 XNUMX에서 XNUMX번 존재할 수 있음을 나타냅니다.

구분 기호로 다음을 추가할 수 있습니다. - (하이픈) 숫자 섹션 사이. 하나 - 국가 코드 유효성 검사 후 추가할 수 있습니다. 따라서 이 시점에서 정규식은 다음과 같습니다.

^+[1-9]{1}[0-9]{0,2}-$

XNUMXD덴탈의 $ at the end는 줄의 끝을 지정합니다. 이제 지역 번호의 경우 이것은 매우 유사합니다. 지역 번호는 XNUMX이나 XNUMX로 시작할 수 없습니다. 따라서 첫 번째 부분은 [2-9]{1}. 이것은 첫 번째 숫자가 2와 9 사이에 있는 것과 일치합니다. 이 일치는 한 번 발생합니다. 그런 다음 나머지 코드에 대해 다음과 같이 작성할 수 있습니다. [0-9]{2}. 이렇게 하면 첫 번째 숫자 뒤에 정확히 두 자리가 있고 각 숫자의 범위는 0에서 9 사이입니다. 다시 끝에 하이픈 구분 기호를 추가합니다.

이제 전체 정규식은 다음과 같습니다.

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|

전화번호 확인을 위해 동일한 패턴을 다시 사용하겠습니다. 전화번호도 XNUMX이나 XNUMX로 시작할 수 없다고 가정해 봅시다. 그래서 추가 [2-9]{1}[0-9]{2} 다시 하이픈을 사용하면 다음과 같은 표현이 됩니다.

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|

이제 남은 유일한 부분은 행 번호이며 길이가 정확히 XNUMX인 모든 숫자가 될 수 있습니다. 이것은 다른 것보다 간단합니다. 표현은 [0-9]{4}.

완전한 표현은 다음과 같습니다.

^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$
|----Country Code---|-|---Area Code--|-|--Tel Prefix--|-|-Line-|

중괄호가 자주 사용되는 것을 눈치채셨을 것입니다. 중괄호 안에 제공된 인스턴스를 일치시키는 데 사용됩니다. 다음과 같이 특정 숫자인 경우 {1}, 이전 패턴과 정확히 한 번 일치합니다. 그러나 범위인 경우 {0, 2}, 최소 및 최대 일치 수를 정의합니다. 따라서, {0, 2}, 최소 XNUMX번에서 최대 XNUMX번까지 패턴을 일치시킵니다.

패턴이 준비되었습니다. 이제 정규식을 사용하여 전화번호가 유효한지 확인하는 간단한 JavaScript 함수를 작성할 수 있습니다. 기능은 다음과 같습니다.

function validatePhoneNumber(phoneNumber) { const pattern = new RegExp("^+[1-9]{1}[0-9]{0,2}-[2-9]{1}[0-9]{2}-[2-9]{1}[0-9]{2}-[0-9]{4}$"); if (pattern.test(phoneNumber)) { console.log("Phone number is valid"); return true; } else { console.log("Phone number is not valid"); return false; }
} validatePhoneNumber("+123-456-789-1234"); validatePhoneNumber("+0-123-456-7890"); validatePhoneNumber("+12-012-123-1234");

기능은 매우 간단합니다. 전화번호를 입력으로 받습니다. 정규식 패턴은 pattern. 패턴은 RegExp 생성자를 사용하여 인스턴스화되고 식을 생성자에 매개 변수로 전달합니다. 그런 다음 전화번호를 사용하여 테스트합니다. test 개체에서 사용할 수 있는 메서드입니다. if-else 문을 사용하여 전화번호가 테스트를 통과하는지 확인합니다. 그렇다면 true를 반환하고 콘솔 메시지를 보냅니다. Phone number is valid. 그렇지 않으면 false를 반환하고 전화 번호가 유효하지 않음을 나타내는 콘솔 메시지를 표시합니다.

이것으로 우리는 갈 수 있습니다. 이제 전화번호가 유효한지 테스트할 수 있습니다.