Rumah >hujung hadapan web >tutorial js >Bekerja dengan nombor telefon di JavaScript

Bekerja dengan nombor telefon di JavaScript

Jennifer Aniston
Jennifer Anistonasal
2025-02-20 10:39:08653semak imbas

Bekerja dengan nombor telefon di JavaScript

Apabila anda mengumpul data dari pengguna, terdapat dua cabaran utama; mengumpul maklumat itu, dan mengesahkannya. Sesetengah jenis maklumat adalah mudah - umur seseorang, sebagai contoh, tidak boleh menjadi lebih mudah untuk dikumpulkan dan mengesahkan. Nama tidak semudah itu, tetapi dengan syarat anda memenuhi kes -kes kelebihan dan variasi antarabangsa - contohnya patronymics, mononymous, atau bahkan orang yang mempunyai nama keluarga yang dihubungkan - anda tidak boleh pergi terlalu jauh (walaupun banyak aplikasi dan perkhidmatan lakukan!). Alamat e -mel, sementara secara teorinya sangat mudah untuk mengesahkan, mempunyai cabaran sendiri - namun, terdapat banyak ungkapan biasa di alam liar yang tidak betul.

Dan kemudian ada nombor telefon. Ini sukar. Sungguh sukar. Dalam artikel ini saya akan membincangkan beberapa cabaran di sekitar mengumpul, mengesahkan, dan memaparkan nombor telefon.

Takeaways Key

Mungkin anda berfikir bahawa sejak nombor telefon cenderung mengikuti format yang cukup tegar, seperti ini:

... bahawa ia sepatutnya mudah untuk membina ungkapan biasa yang mudah untuk mengesahkannya. Malah, inilah satu:

<br>
202-456-1111<br>

Nah, berhenti di sana. Sebagai permulaan, berikut hanya beberapa variasi nombor di atas, yang semuanya sah:

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Jadi berdasarkan itu, kita tahu bahawa pakaian ekspresi biasa tidak semudah yang kita fikirkan pertama - tetapi itu hanya separuh daripadanya. Contoh-contoh ini hanya untuk nombor berasaskan AS. Pasti, jika anda tahu bahawa nombor yang anda kumpulkan akan menjadi negara tertentu, anda mungkin dapat menggunakan ungkapan biasa. Jika tidak, pendekatan ini tidak akan memotongnya.

Mari kita lihat beberapa isu lain di sekitar nombor telefon, dan mengapa mereka membuat pekerjaan kita lebih keras.

Nombor Tukar

Semua jenis faktor luaran boleh mempunyai implikasi untuk penomboran telefon. Seluruh negara datang dan pergi, memperkenalkan awalan negara baru. Klasifikasi nombor baru memperkenalkan sistem penomboran baru-kadar premium, kadar tempatan, bebas tol, dan sebagainya. Apabila pembawa kehabisan satu set nombor-seperti, sedih, kadar premium-mereka hanya memperkenalkan awalan baru.

Beberapa perubahan mempunyai implikasi yang besar; Di United Kingdom beberapa tahun yang lalu, sebagai contoh, seluruh sistem penomboran serantau menjalani perubahan drastik, dengan hampir setiap kod kawasan mendapat tambahan "1" dimasukkan. Walaupun begitu, modal mempunyai sistem yang berbeza. Ia mungkin satu dekad sebelum papan tanda ditukar di seluruh negara untuk mencerminkan perubahan.

maka, tentu saja, terdapat pertumbuhan yang besar dan belum pernah terjadi sebelumnya dalam mudah alih. Tidak lagi bilangan nombor telefon yang diperlukan sebahagian besarnya terhad kepada bilangan isi rumah, tetapi banyak kali. Ketegangan yang berterusan di kolam nombor yang ada hanya dapat meningkatkan kemungkinan perubahan selanjutnya.

Kod Dialing Antarabangsa

Ia sering penting untuk menangkap kod dailan antarabangsa nombor. Dalam sesetengah kes, konteks mungkin bermakna mereka tidak diperlukan. Sebagai contoh jika anda beroperasi di satu negara, dan nombor telefon ditangkap untuk digunakan oleh pengendali manusia, anda mungkin tidak memerlukannya. Tetapi untuk apa -apa automatik dari jauh - seperti menghantar mesej SMS - atau untuk mengesahkannya dengan berkesan, anda perlu menangkap awalan negara.

Perpustakaan Negara mengandungi sekumpulan maklumat geografi yang merangkumi kod dailan antarabangsa. Berikut adalah petikan dari negara.json dari perpustakaan itu:

<br>
202-456-1111<br>
seperti yang anda lihat, ini menunjukkan bahawa Austria menggunakan kod pendailan antarabangsa 43.

Jadi bagaimana mungkin kita menggunakan maklumat ini? Nah, menggunakan keajaiban Lodash (atau garis bawah), terdapat beberapa cara di mana kita dapat menanyakan maklumat berkaitan kod.

Sebagai contoh, untuk mengetahui sama ada kod pendail yang diberikan adalah sah:

Terdapat cara yang lebih berkesan untuk melakukan ini, tentu saja, jadi ini dan contoh -contoh berikut tidak semestinya dioptimumkan untuk pengeluaran.
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

kita dapat melihat negara -negara yang menggunakan kod pendail tertentu:

Akhirnya, kita boleh mendapatkan kod dailan untuk negara tertentu:

<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>

Anda akan mendapati fungsi -fungsi ini dibungkus sebagai modul, bersama dengan ujian unit, dalam repositori yang mengiringi artikel.

Bahkan kod dailan antarabangsa, bagaimanapun, tidak semudah yang anda fikirkan. Format ini boleh berubah - 1, 43, 962 1868 adalah semua kod yang sah. Tidak semestinya pemetaan satu sama lain; 44 sebagai contoh, digunakan bukan hanya untuk United Kingdom tetapi untuk Isle of Man, Guernsey dan Jersey.
<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>

Nombor juga mesti diubah mengikut mana anda mendail dari. Dari luar negara, untuk memanggil nombor UK, anda perlu menjatuhkan sifar dan awalan terkemuka dengan kod pendail 44:

<br>
202-456-1111<br>
... menjadi ...

anda juga boleh menggantikan "" dengan sifar berganda:
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Untuk merumitkan perkara lebih jauh, beberapa nombor berbeza apabila dipanggil dari luar negara bergantung pada negara mana yang anda dail

dari
<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>
. Di Amerika Syarikat, sebagai contoh, nombor juga mesti diawali dengan kod keluar AS 011, jadi contoh di atas menjadi:

Syukurlah, ada format yang boleh kita gunakan yang membolehkan kita dapat mengelilingi variasi ini.

e.164
<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>

Nasib baik untuk pemaju terdapat standard yang diiktiraf di peringkat antarabangsa untuk nombor telefon di mana sahaja di dunia yang dipanggil E.164. Formatnya dipecahkan seperti berikut:

Nombor telefon boleh mempunyai maksimum 15 digit

bahagian pertama nombor telefon ialah kod negara
  • Bahagian kedua ialah Kod Destinasi Kebangsaan (NDC)
  • Bahagian terakhir ialah nombor pelanggan (SN)
  • NDC dan SN bersama -sama secara kolektif dipanggil nombor kebangsaan (signifikan)
  • (
  • sumber
  • )

Berikut adalah nombor dari sebelumnya, dalam format E.164:

kita boleh menggunakan format yang sama untuk, sebagai contoh, nombor UK yang berpangkalan di London:

<span>var _ = require('lodash')
</span><span>, data = require('world-countries')
</span>module<span>.exports = {
</span><span>/**
</span><span>* Determines whether a given international dialing code is valid
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return bool
</span></span><span>*/
</span><span>isValid : function(code) {
</span><span>var codes = _.flatten(_.pluck(data, 'callingCode'));
</span><span>return _.contains(codes, code);
</span><span>}
</span><span>// ...
</span><span>}</span>
kita boleh mewakili sebarang nombor telefon yang sah menggunakan format e.164. Kami tahu negara yang dirujuknya, dan ia tidak begitu baik - menjadikannya pilihan yang ideal untuk penyimpanan. Ia juga biasa digunakan untuk perkhidmatan berasaskan telefon seperti penyedia SMS, seperti yang akan kita lihat sedikit kemudian.

Ada tangkapan, tentu saja. Standard E.164 mungkin bagus untuk penyimpanan, tetapi mengerikan untuk dua perkara. Pertama, hampir tidak ada yang akan menaip atau membaca nombor mereka dalam format itu. Kedua, ia tidak ada harapan dari segi pembacaannya. Kemudian, apabila kita melihat libphonenumber, kita akan melihat bahawa ada cara memformat nombor untuk manusia.

Mengumpul nombor telefon
<span>/**
</span><span>* Gets a list of countries with the specified dialing code
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return array An array of two-character country codes
</span></span><span>*/
</span><span>getCountries : function(code) {
</span><span>var countryEntries = _.filter(data, function(country){
</span><span>return (_.contains(country.callingCode, code));
</span><span>})
</span><span>return _.pluck(countryEntries, 'cca2');
</span><span>}</span>

Pertama, mari kita lihat isu mengumpul nombor telefon.

html5 dan input "tel"

HTML5 memperkenalkan jenis input "tel" baru. Walau bagaimanapun, kerana isu -isu di sekitar variasi dalam format, ia sebenarnya tidak meletakkan sebarang sekatan ke atas apa yang pengguna boleh menaip, dan tidak melakukan apa -apa pengesahan dengan cara yang sama seperti, katakan, elemen e -mel. Walau bagaimanapun, terdapat beberapa kelebihan - apabila digunakan di tapak mudah alih, papan kekunci telefon pengguna biasanya akan dipaparkan, bukannya susun atur papan kekunci konvensional.

anda boleh menggunakan satu elemen untuk mengumpul nombor:

Sebagai alternatif, anda boleh memecahkan nombor ke dalam elemen yang berasingan:

<br>
202-456-1111<br>

Sokongan penyemak imbas cukup bagus (mis. Chrome 6, Firefox 4, Safari 5, iaitu 10), tetapi walaupun dalam pelayar yang lebih tua ia hanya akan kembali ke medan teks lama yang biasa.

Sekiranya kita memutuskan bahawa ungkapan biasa mencukupi - dan ingat, ada masalah - maka kita boleh menggunakan atribut corak untuk menambah beberapa pengesahan:

input bertopeng
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

Input bertopeng adalah teknik yang sama untuk menyekat input pengguna atau memberikan petunjuk mengenai format yang diharapkan. Tetapi sekali lagi, melainkan jika anda yakin bahawa nombor akan sentiasa untuk negara tertentu, sangat sukar untuk memenuhi variasi antarabangsa. Walau bagaimanapun, satu perkara untuk mengganggu pengguna dengan membuat andaian-meminta pengguna bukan AS untuk menyediakan keadaan dan kod zip. Ia adalah satu lagi untuk membuat bentuk yang tidak dapat digunakan sepenuhnya, contohnya dengan memaksa orang untuk memberikan nombor dalam format negara tertentu.

Walau bagaimanapun, mereka boleh menjadi berkesan jika anda tahu bahawa nombor tertentu akan berada dalam julat tertentu. Berikut adalah contoh input bertopeng untuk nombor telefon AS.

cara yang lebih baik

Terdapat cara yang lebih baik dan lebih fleksibel untuk mengumpul nombor telefon, dalam bentuk plugin jQuery yang sangat baik. Ia digambarkan di bawah.

anda juga boleh bermain dengan demo langsung di sini. Bekerja dengan nombor telefon di JavaScript

Penggunaan mudah - pastikan anda telah memasukkan jQuery, perpustakaan, dan fail CSS, dan bendera sprite tersedia dan dirujuk dengan betul dari CSS - anda akan dapati ia dalam binaan/img/flags.png .

Seterusnya, buat elemen:

Akhirnya, INTIALIZE IT seperti berikut:

<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>

Untuk senarai lengkap pilihan konfigurasi, rujuk dokumentasi. Kemudian, kita akan melihat pilihan Utilsscript, tetapi pertama, kita perlu menyelidiki perpustakaan yang berguna.

memperkenalkan libphonenumber

<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>
bernasib baik, ada penyelesaian untuk banyak kesilapan dan kesesatan kami. Asalnya dibangunkan untuk sistem operasi Android, Perpustakaan Libphonenumber Google menawarkan pelbagai kaedah dan utiliti untuk bekerja dengan nombor telefon. Lebih baik lagi, ia telah dipindahkan dari Java ke JavaScript, jadi kami boleh menggunakannya dalam aplikasi web atau node.js.

Pemasangan

anda boleh memuat turun perpustakaan dari laman utama projek - seperti yang anda harapkan - kod Google.

anda juga boleh mendapatkannya melalui npm. Inilah halaman projek, dan dipasang dari baris arahan:

anda juga boleh memasangnya menggunakan Bower:

Jika anda berfikir untuk menggunakannya dalam projek front-end, diberi amaran walaupun-walaupun dikurangkan dan dimampatkan, ia masuk lebih dari 200kb.
<span>var _ = require('lodash')
</span><span>, data = require('world-countries')
</span>module<span>.exports = {
</span><span>/**
</span><span>* Determines whether a given international dialing code is valid
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return bool
</span></span><span>*/
</span><span>isValid : function(code) {
</span><span>var codes = _.flatten(_.pluck(data, 'callingCode'));
</span><span>return _.contains(codes, code);
</span><span>}
</span><span>// ...
</span><span>}</span>

Nombor parsing

Untuk menunjukkan ciri -ciri utama perpustakaan, saya akan menganggap anda menulis aplikasi Node.js. Anda boleh menemui beberapa contoh kod dalam repositori yang melengkapkan artikel ini.

Pertama, import PhoneUtil:

<br>
202-456-1111<br>
Sekarang anda boleh menggunakan kaedah parse () untuk mentafsirkan nombor telefon:

Terdapat beberapa perkara yang boleh kita lakukan dengan ini. Mari kita mula -mula mengimport beberapa pemalar dari perpustakaan. Tukar Pengisytiharan anda kepada yang berikut:
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

sekarang kita boleh melakukan perkara berikut:

<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>

output dari ini akan menjadi seperti berikut:

<br>
{<br>
"name": {<br>
"common": "Austria",<br>
"official": "Republic of Austria",<br>
// ... //<br>
},<br>
// ... //<br>
"callingCode": ["43"],<br>
// ... //<br>
},<br>

sekarang cuba menghirup nombor tanpa kod pendaian antarabangsa:

<span>var _ = require('lodash')
</span><span>, data = require('world-countries')
</span>module<span>.exports = {
</span><span>/**
</span><span>* Determines whether a given international dialing code is valid
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return bool
</span></span><span>*/
</span><span>isValid : function(code) {
</span><span>var codes = _.flatten(_.pluck(data, 'callingCode'));
</span><span>return _.contains(codes, code);
</span><span>}
</span><span>// ...
</span><span>}</span>
ini akan membuang pengecualian berikut:

Ini kerana tanpa jelas menceritakannya, negara -negara itu nombornya, mustahil untuk mentafsir. Kaedah parse () mengambil parameter kedua pilihan, iaitu kod negara ISO 3166-1 Alpha-2 (iaitu, dua aksara).
<span>/**
</span><span>* Gets a list of countries with the specified dialing code
</span><span>*
</span><span>* <span>@param string code
</span></span><span>* <span>@return array An array of two-character country codes
</span></span><span>*/
</span><span>getCountries : function(code) {
</span><span>var countryEntries = _.filter(data, function(country){
</span><span>return (_.contains(country.callingCode, code));
</span><span>})
</span><span>return _.pluck(countryEntries, 'cca2');
</span><span>}</span>

Jika anda mencuba garis lagi, tetapi kali ini melewati "kami" sebagai hujah kedua, anda akan mendapati bahawa hasilnya seperti dahulu:

<span>/**
</span><span>* Gets the dialing codes for a given country
</span><span>*
</span><span>* <span>@param string country The two-character country code
</span></span><span>* <span>@return array An array of strings representing the dialing codes
</span></span><span>*/
</span><span>getCodes : function(country) {
</span><span>// Get the country entry
</span><span>var countryData = _.find(data, function(entry) {
</span><span>return (entry.cca2 == country);
</span><span>});
</span><span>// Return the code(s)
</span><span>return countryData.callingCode;
</span><span>}</span>
Anda juga boleh bermain -main dengan format; Semua ini juga akan berfungsi:

untuk menafsirkan nombor United Kingdom:

<br>
020 7925 0918<br>

ini akan mengeluarkan yang berikut:

<br>
+44 20 7925 0918<br>
Sebaik sahaja anda telah menghuraikan nombor, anda boleh mengesahkannya - seperti yang akan kita lihat di bahagian seterusnya.

Mengesahkan nombor

Pengesahan mengikuti corak yang sama; Sekali lagi, terdapat hujah pilihan kedua, tetapi satu yang anda perlukan jika negara tidak dinyatakan dengan tegas.
<br>
0044 20 7925 0918<br>

Berikut adalah beberapa contoh nombor yang sah, di mana kod negara sama ada disediakan sebagai hujah kedua, atau terkandung dalam hujah pertama:

<br>
011 44 20 7925 0918<br>
Jika anda tidak membekalkan kod negara, atau ia tidak tersirat, anda mendapat kesilapan yang sama seperti sebelumnya:

Berikut adalah beberapa contoh di mana pengesahan gagal, kembali palsu:

diberi amaran, bagaimanapun, sebagai nombor yang tidak sah boleh membuang pengecualian:

<br>
+12024561111<br>

Menentukan Jenis Nombor

Kadang -kadang, ia berguna untuk mengetahui jenis

<br>
+442079250918<br>
nombor telefon. Sebagai contoh, anda mungkin ingin memastikan bahawa anda telah disediakan dengan nombor mudah alih-mungkin anda merancang untuk menghantar mesej SMS, contohnya untuk melaksanakan pengesahan dua faktor-atau cuba menghilangkan nombor kadar premium.

Fungsi getNumberType () perpustakaan tidak hanya itu. Mari kita lihat.

Fungsi mengambil nombor telefon yang dihuraikan sebagai hujahnya:

<span><span><span><input</span> type<span>="tel"</span> name<span>="number"</span>></span></span>

Nilai pulangan adalah malar yang ditakrifkan dalam sub-modul phonenumbertype-anda akan ingat bahawa kami memerlukannya sebagai pnf.

Sebagai contoh, mari kita pertanyaan sama ada nombor yang dimaksudkan adalah mudah alih atau garis tetap:

<br>
202-456-1111<br>
seolah -olah menjadi tema topik, secara semulajadi ada tangkapan. Kadang -kadang, walaupun Perpustakaan Libphonenumber tidak pasti. Nombor AS, sebagai contoh, tidak dapat dibezakan dengan mudah; oleh itu pnt.fixed_line_or_mobile yang berterusan.

kita hanya perlu menukar kod contoh kita untuk mencerminkan ketidakpastian ini:

Terdapat beberapa kemungkinan lain. Berikut adalah senarai penuh pada masa ini:
<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>

pnt.fixed_line
  • pnt.mobile
  • pnt.fixed_line_or_mobile
  • pnt.toll_free
  • pnt.premium_rate
  • pnt.shared_cost
  • pnt.voip
  • pnt.personal_number
  • pnt.pager
  • pnt.uan
  • pnt.unknown
  • seperti yang anda lihat, pnt.unknown mencerminkan fakta bahawa kita tidak semestinya mengumpulkan apa -apa maklumat dengan pasti. Jadi secara ringkas, sementara ciri ini boleh berguna sebagai pemeriksaan awal yang cepat, kita tidak boleh bergantung padanya.

Adakah nombor dalam perkhidmatan?

Terdapat banyak nombor telefon yang akan disahkan, tetapi yang tidak digunakan. Mereka mungkin telah terputus, belum diperuntukkan, atau mungkin kad SIM telah jatuh ke tandas.

Jika anda perlu memastikan bahawa nombor bukan hanya sah tetapi juga aktif, terdapat beberapa pilihan yang terbuka kepada anda.

Satu pendekatan adalah untuk menghendaki pengguna mengesahkan nombor mereka, dengan cara yang sama seperti yang anda mungkin memerlukan pengguna mengesahkan alamat e -mel mereka. Anda boleh menggunakan perkhidmatan seperti Twilio untuk menghantar SMS, atau membuat panggilan.

Berikut adalah coretan kod yang sangat mudah untuk menghasilkan dan menghantar kod pengesahan dengan SMS menggunakan Twilio:

Ia adalah latihan remeh untuk meminta pengguna memasukkan kod ke dalam borang dalam aplikasi web anda untuk mengesahkannya - atau anda juga boleh membenarkan orang mengesahkan nombor mereka dengan membalas mesej.

Terdapat juga perkhidmatan (berbayar) yang akan memeriksa sama ada nombor dalam perkhidmatan untuk anda dalam masa nyata, seperti yang satu ini dari Byteplant.
<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>

Isu -isu lain

undang -undang

Seperti apa -apa maklumat peribadi, terdapat juga banyak isu undang -undang yang perlu diperhatikan. Di UK, sebagai contoh, Perkhidmatan Keutamaan Telefon (TPS) adalah daftar nasional nombor telefon yang telah didaftarkan oleh orang yang tidak mahu menerima komunikasi pemasaran. Terdapat perkhidmatan berbayar yang menawarkan API untuk memeriksa nombor terhadap daftar ini, seperti yang satu ini.

Pertimbangan kebolehgunaan

Sangat biasa untuk meminta sehingga tiga nombor telefon yang berbeza dalam satu bentuk; contohnya siang hari, petang dan mudah alih.

Ia juga patut diingat bahawa meminta nombor telefon melalui internet boleh dilihat sebagai agak mengganggu. Sekiranya seseorang tidak mahu memberikan maklumat itu walaupun anda telah membuat bidang yang diperlukan, mereka mungkin akan melakukan satu daripada dua perkara:

  • cuba "menipu" pengesahan. Bergantung pada pendekatan, mereka boleh menaip sesuatu seperti "Direktori Ex", atau masukkan nombor yang tidak sah - seperti yang mengandungi hanya nombor.
  • Walk Away.
menggabungkan plugin jQuery dengan libphonenumber

anda mungkin ingat bahawa plugin jQuery mempunyai pilihan yang agak kritikal yang dipanggil Utilsscript.

Pilihan ini membolehkan kami memanfaatkan ciri pengesahan dan pemformatan LibPhoneNumber. Setelah memilih negara-sama ada menggunakan drop-down atau dengan menaip kod pendail-ia akan mengubah Textfield menjadi input bertopeng yang mencerminkan format penomboran negara.

Plugin mengandungi versi Libphonenumber yang dibungkus; Lulus jalan ke fail ini ke pembina seperti berikut:

Seperti yang telah saya sebutkan tadi, ingatlah bahawa pendekatan ini harus digunakan dengan berhati -hati, disebabkan saiz fail Perpustakaan Libphonenumber. Merujuknya di sini dalam pembina bagaimanapun bermakna ia boleh dimuatkan atas permintaan.
<br>
202-456-1111<br>

Memaparkan nombor telefon

Kami telah melihat bagaimana kami boleh memformat nombor apabila memaparkannya untuk menjadi lebih "mesra", menggunakan format seperti pnf.international dan pnf.national.

Kami juga boleh menggunakan protokol Tel dan CallTO untuk menambah hyperlink ke nombor telefon, yang berguna pada tapak mudah alih - membolehkan pengguna mendail nombor langsung dari laman web.

Untuk melakukan ini, kita memerlukan format E.164 untuk pautan itu sendiri - contohnya:

Sudah tentu, anda boleh menggunakan kaedah format () LibPhonenumber Library () untuk menjadikan kedua-dua versi E.164 (PNF.E164) dan versi paparan yang lebih mesra pengguna.

microdata

<br>
^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
kita juga boleh menggunakan microdata untuk menandakan nombor telefon secara semantik. Inilah contoh; Perhatikan penggunaan itemprop = "telefon" untuk menandakan pautan:

Ringkasan

Dalam artikel ini, kami telah membuka sarang Hornets yang nombor telefon. Ia sepatutnya jelas sekarang bahawa terdapat pelbagai kerumitan, kehalusan dan gotchas yang perlu anda ketahui jika anda perlu mengumpul, mengesahkan dan memaparkannya.

Kami telah melihat beberapa kaedah untuk mengumpul nombor-jenis input "tel", input bertopeng dan akhirnya plugin jQuery Intl-Tel-input.

<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>
Kami kemudian melihat beberapa isu mengenai pengesahan, dan mengapa pendekatan biasa seperti ungkapan biasa sering tidak mencukupi, terutamanya apabila anda pergi antarabangsa.

kami melihat Perpustakaan Libphonenumber Google; Menggunakannya untuk menghuraikan, mengesahkan, memaparkan dan menentukan jenis nombor telefon.

kami menggabungkan plugin Intl-Tel-Input dengan LibPhoneNumber untuk pengalaman pengguna yang lebih baik, walaupun yang datang dengan kos dari segi prestasi.

Akhirnya kita melihat bagaimana kita dapat menandakan nombor telefon di HTML kami.

Terdapat beberapa cadangan yang akan saya buat untuk berurusan dengan nombor telefon:

  • Kecuali anda hanya beroperasi di satu negara, sedar akan perbezaan antarabangsa.
  • Gunakan input bertopeng dengan berhati -hati.
  • berhati-hati dengan pengesahan berasaskan ekspresi biasa.
  • di mana mungkin, gunakan e.164 untuk penyimpanan.
  • Gunakan Perpustakaan Libphonenumber Google.
  • Apabila memaparkan nombor, formatnya jika mungkin, gunakan TEL: atau callto: jenis pautan, dan gunakan microdata.

Soalan Lazim Mengenai Nombor Telefon Dalam JavaScript

Bagaimana untuk mendapatkan kod negara dari nombor telefon di JavaScript? Perpustakaan ini adalah alat yang berkuasa untuk parsing, pemformatan, dan mengesahkan nombor telefon, menjadikannya pilihan yang ideal untuk mengekstrak kod negara dengan tepat. Untuk memulakan, anda perlu memasang perpustakaan menggunakan NPM, dan kemudian mengimportnya ke dalam fail JavaScript anda. Sebaik sahaja diimport, anda boleh menggunakan kelas PhonenumberUtil untuk bekerja dengan nombor telefon dengan berkesan.

Untuk mengekstrak kod negara dari nombor telefon, anda harus terlebih dahulu menghuraikan nombor telefon menggunakan fungsi parse. Fungsi ini mengambil nombor telefon sebagai rentetan dan kod rantau lalai pilihan, yang biasanya merupakan kod negara ISO 3166-1 Alpha-2. Selepas parsing, anda boleh mengakses objek phonenumber dan menggunakan kaedah getCountryCode untuk mendapatkan kod negara sebagai integer. Pendekatan ini memastikan ketepatan mengendalikan nombor telefon antarabangsa dan mengambil kira pelbagai format serantau

Bagaimana untuk mengesahkan nombor telefon dengan kod negara di JavaScript? Untuk memastikan pengesahan yang tepat, satu pendekatan yang berkesan adalah menggunakan perpustakaan "libphonenumber" oleh Google. Perpustakaan ini menawarkan alat yang komprehensif untuk menghuraikan, memformat, dan mengesahkan nombor telefon, menjadikannya pilihan yang boleh dipercayai untuk tujuan ini. . Sebaik sahaja diimport, anda boleh memanfaatkan kelas PhonenumberUtil perpustakaan untuk melakukan pengesahan nombor telefon. Fungsi isvalidnumber, khususnya, membolehkan anda mengesahkan nombor telefon yang dihuraikan, kembali benar jika nombor itu sah atau palsu jika tidak. Dengan menghuraikan nombor telefon menggunakan keupayaan perpustakaan, anda memastikan ia mematuhi format dan peraturan tertentu yang berkaitan dengan kod negara yang disediakan. Mengendalikan nombor telefon antarabangsa dengan format dan piawaian yang berbeza -beza. Dengan melaksanakan perpustakaan "libphonenumber", anda dapat meningkatkan ketepatan dan kebolehpercayaan pengesahan nombor telefon dalam aplikasi JavaScript anda. Memisahkan kod negara dari nombor telefon di JavaScript adalah tugas yang sama, terutama ketika berurusan dengan nombor telefon antarabangsa. Pendekatan praktikal melibatkan penggunaan ekspresi biasa dan manipulasi rentetan. Anda boleh menentukan corak ekspresi biasa untuk memadankan kod negara, yang biasanya diwakili sebagai tanda tambah diikuti oleh satu atau lebih digit. Ekspresi biasa, seperti (d), dengan cekap menangkap kod negara dari nombor telefon.

Sebaik sahaja anda mempunyai corak ekspresi biasa, anda boleh menggunakan kaedah EXEC untuk memohon kepada nombor telefon. Kaedah EXEC mengembalikan array yang mengandungi bahagian yang dipadankan dari nombor telefon dan mana -mana kumpulan yang ditangkap. Dalam kes ini, kod negara yang ditangkap boleh diakses dari kumpulan pertama dalam array (Indeks 1). Dengan mengikuti proses ini, anda boleh memisahkan kod negara dengan tepat dari nombor telefon dan menjadikannya tersedia untuk kegunaan selanjutnya dalam aplikasi JavaScript anda.

Kaedah ini serba boleh dan boleh disesuaikan untuk berfungsi dengan pelbagai format nombor telefon. Sama ada anda mengendalikan input pengguna atau memproses nombor telefon dari sumber luaran, pendekatan ini memastikan bahawa anda boleh mengekstrak kod negara dengan pasti, langkah yang berharga dalam bekerja dengan nombor telefon antarabangsa.

Bagaimana saya memformat nombor telefon saya di peringkat antarabangsa?

Memformat nombor telefon untuk kegunaan antarabangsa adalah penting untuk memastikan kejelasan dan keserasian di seluruh kawasan yang berbeza. Nombor telefon yang diformat di peringkat antarabangsa biasanya terdiri daripada tiga komponen utama: kod negara, kod kawasan (jika berkenaan), dan nombor telefon tempatan. Kod negara diwakili oleh tanda tambah () diikuti oleh kod angka, seperti 1 untuk Amerika Syarikat. Ia berfungsi sebagai pengenal yang diiktiraf secara universal untuk negara atau rantau. Nombor telefon tempatan berikut, yang boleh berbeza -beza panjang dan mungkin mengandungi pemisah tambahan atau tanda baca. Format khusus boleh berbeza antara negara, jadi penting untuk mengikuti konvensyen tempatan apabila tersedia. Dengan mematuhi struktur ini, anda memastikan nombor telefon mudah dikenali dan boleh digunakan di seluruh sempadan antarabangsa.

Atas ialah kandungan terperinci Bekerja dengan nombor telefon di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Advanced Snap.svgArtikel seterusnya:Advanced Snap.svg