Rumah >hujung hadapan web >tutorial js >Bekerja dengan nombor telefon di JavaScript
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
... bahawa ia sepatutnya mudah untuk membina ungkapan biasa yang mudah untuk mengesahkannya. Malah, inilah satu:
<br> 202-456-1111<br>
<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.
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.
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:
<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>
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 ...
<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:
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:
bahagian pertama nombor telefon ialah kod negara
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"
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:
<br> ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
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
anda juga boleh bermain dengan demo langsung di sini.
Seterusnya, buat elemen:
<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 juga boleh mendapatkannya melalui npm. Inilah halaman projek, dan dipasang dari baris arahan:
<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>
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:
<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>
<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:
<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:
<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:
<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>
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:
<br> ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
pnt.fixed_line
Adakah nombor dalam perkhidmatan?
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
Sangat biasa untuk meminta sehingga tiga nombor telefon yang berbeza dalam satu bentuk; contohnya siang hari, petang dan mudah alih.
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:
<br> 202-456-1111<br>
Memaparkan nombor telefon
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:
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:
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 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:
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.
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!