운 좋게도 개발자에게는 전 세계 어디에서나 E.164라는 전화 번호에 대한 명백하고 국제적으로 인정 된 표준이 있습니다. 형식은 다음과 같이 분해됩니다
전화 번호는 최대 15 자리 를 가질 수 있습니다.
전화 번호의 첫 번째 부분은 국가 코드 입니다.
두 번째 부분은 NDC (National Destination Code)입니다
마지막 부분은 가입자 번호 (sn) 입니다
NDC와 SN이 함께 통합적으로 전국 (유의미한) 번호 라고 불립니다.
<br>
202 456 1111<br>
(202) 456 1111<br>
2024561111<br>
1-202-456-1111<br>
1-202-456-1111 x1234<br>
1-202-456-1111 ext1234<br>
1 (202) 456-1111<br>
1.202.456.1111<br>
1/202/456/1111<br>
12024561111<br>
+1 202 456 1111<br>
로그인 후 복사
로그인 후 복사
( 소스 )
다음은 E.164 형식으로 이전의 숫자입니다 :
우리는 예를 들어 런던 기반 영국 번호에 대해 동일한 형식을 사용할 수 있습니다 :
우리는 E.164 형식을 사용하여 유효한 전화 번호를 나타낼 수 있습니다. 우리는 그것이 어떤 국가를 지칭하는지 알고 있으며, 그것은 무겁기 때문에 저장에 이상적인 선택입니다. 나중에 볼 수 있듯이 SMS 제공 업체와 같은 전화기 기반 서비스에 일반적으로 사용됩니다.
물론 캐치가 있습니다. E.164 표준은 저장에 좋지만 두 가지에는 끔찍할 수 있습니다. 첫째, 사실상 아무도 그 형식으로 자신의 번호를 입력하거나 읽지 않습니다. 둘째, 가독성 측면에서 희망이 없습니다. 나중에 LibphoneNumber를 볼 때 인간을위한 숫자를 형식화하는 방법이 있음을 알 수 있습니다.
전화 번호 수집 <br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>
먼저 전화 번호 수집 문제를 살펴 보겠습니다.
html5 및 "tel"입력
html5는 새로운 "전화"입력 유형을 도입했습니다. 그러나 형식의 변형에 관한 문제로 인해 실제로 사용자가 입력 할 수있는 내용에 대한 제한 사항도 제한되지 않으며 이메일 요소와 같은 방식으로 유효성 검사를 수행하지 않습니다. 그럼에도 불구하고 몇 가지 장점이 있습니다. 모바일 사이트에서 사용하면 기존의 키보드 레이아웃이 아닌 사용자의 전화 키패드가 일반적으로 표시됩니다.
단일 요소를 사용하여 숫자를 수집 할 수 있습니다.
또는 숫자를 별도의 요소로 분해 할 수 있습니다.
<br>
202-456-1111<br>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
브라우저 지원은 꽤 좋습니다 (예 : Chrome 6, Firefox 4, Safari 5, IE 10). 그러나 오래된 브라우저에서도 단순히 평범한 오래된 텍스트 필드로 돌아갑니다.
정규 표현식이 충분하다고 결정해야한다.
마스크 입력
마스크 입력은 사용자 입력을 제한하거나 예상 형식에 대한 힌트를 제공하는 일반적인 기술입니다. 그러나 다시 말하지만, 숫자가 항상 특정 국가에 대한 숫자가 될 것이라고 확신 할 수 없다면 국제적 변형을 충족시키는 것은 매우 어렵습니다. 그러나 가정을하여 사용자를 괴롭히는 것은 비 유스 사용자에게 상태와 지퍼 코드를 제공하도록 요청합니다. 예를 들어 사람들이 특정 국가의 형식으로 숫자를 제공하도록 강요함으로써 양식을 완전히 사용할 수없는 양식을 만드는 것은 또 다른 일입니다.
그럼에도 불구하고, 특정 숫자가 특정 범위 내에 있다는 것을 알고 있다면 효과적 일 수 있습니다. 다음은 미국 전화 번호에 대한 마스크 입력의 예입니다.
더 나은 방법
우수한 jQuery 플러그인의 형태로 전화 번호를 수집하는 더 좋고 유연한 방법이 있습니다. 아래에 묘사되어 있습니다.
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
로그인 후 복사
로그인 후 복사
로그인 후 복사
당신은 여기에서 라이브 데모와 함께 연주 할 수 있습니다.
사용법은 간단합니다 - jQuery, 라이브러리 및 CSS 파일을 포함시키고 CSS에서 플래그 스프라이트를 사용할 수 있고 제대로 참조해야합니다. Build/IMG/Flags.png에서 찾을 수 있습니다. .
다음, 요소를 만듭니다 :
마지막으로, 다음과 같이 인터넷 화하십시오
구성 옵션의 전체 목록은 문서를 참조하십시오. 나중에 UtilsScript 옵션을 살펴 보지만 먼저 다른 유용한 라이브러리를 탐구해야합니다.
.
LibphoneNumber 소개
운 좋게도, 많은 검증과 형식의 고민에 대한 해결책이 있습니다. 원래 Android 운영 체제 용으로 개발 된 Google의 LibphoneMber Library는 전화 번호로 작업하기위한 모든 종류의 방법과 유틸리티를 제공합니다. 더 나은 것은 Java에서 JavaScript로 포팅되었으므로 Web 또는 Node.js 응용 프로그램에서 사용할 수 있습니다.
설치
당신은 프로젝트 홈페이지에서 라이브러리를 다운로드 할 수 있습니다 - 예상대로 - Google 코드.
당신은 또한 npm을 통해 얻을 수 있습니다. 프로젝트 페이지는 다음과 같습니다.
Bower를 사용하여 설치할 수도 있습니다
프론트 엔드 프로젝트에서 사용하려는 경우 경고를 받으십시오. 그러나 소형화되고 압축 되더라도 200kb 이상으로 들어옵니다.
. 구문 분석 번호
라이브러리의 주요 기능을 보여주기 위해 Node.js 응용 프로그램을 작성한다고 가정하겠습니다. 이 기사를 보완하는 저장소에서 몇 가지 예제 코드를 찾을 수 있습니다.
먼저, import phoneutil :