>當您從用戶那裡收集數據時,面臨兩個關鍵挑戰。收集這些信息並驗證它。某些類型的信息很簡單 - 例如,某人的年齡並不是更簡單的收集和驗證。名字並不像聽起來那樣簡單,但可以為您提供邊緣案例和國際變化的餐飲(例如,顧客,手提義,甚至是具有連字符的姓氏的人),您不會出錯(儘管很多應用程序和大量的應用程序和服務可以!)。電子郵件地址雖然從理論上講非常容易驗證,但面臨著自己的挑戰 - 但是,野外有很多正則表達不太正確。
,然後有電話號碼。這些很難。真的很難。在本文中,我將討論有關收集,驗證和顯示電話號碼的一些挑戰。鑰匙要點
>
<br> 202-456-1111<br>好吧,就在那裡。對於初學者來說,這裡只是上面數字的一些變體,所有這些都完全有效:
因此,基於這一點,我們知道正則表達式不像我們首先想到的那樣簡單 - 但這只是其中的一半。這些示例僅適用於美國的數字。當然,如果您知道要收集的數字將用於特定國家 /地區,則可以使用正則表達式。否則,這種方法將不會削減。
<br> ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>>讓我們看一下有關電話號碼的其他一些問題,以及為什麼它們使我們的工作變得更加努力。
>各種外部因素可能對電話編號有影響。整個國家來來去去,引入了新的國家前綴。數字的新分類引入了新的編號系統 - 高級速率,本地利率,免費電話等。當運營商用完一組數字(可悲的是,高級利率)時,他們只是引入了一個新的前綴。
一些變化具有巨大的影響;例如,在幾年前的英國,整個區域編號系統都發生了巨大的變化,幾乎每個區域代碼都插入了其他“ 1”。即使那樣,首都也有一個微妙的系統。在全國范圍內更改標牌以反映變化大概是十年的。
國際撥號代碼
國家圖書館包含許多地理信息,其中包括國際撥號代碼。這是來自國家 /地區的摘錄。
如您所見,這表明奧地利使用國際撥號代碼43.
那麼我們如何使用此信息?好吧,使用lodash(或下劃線)的魔法,我們可以通過幾種方式查詢與代碼相關的信息。
> 例如,要找出給定的撥號代碼是否有效:<br> 202-456-1111<br>
當然,
有更效率的方法可以做到這一點。
我們可以查找使用特定撥號代碼的國家 /地區:>
<br> ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>>最後,我們可以獲取給定國家 /地區的撥號代碼:
>
>您會在文章附帶的存儲庫中找到這些功能作為模塊以及單元測試。
。 但是,即使是國際撥號代碼,也並不像您想像的那樣簡單。格式可以變化 - 1,43,962 1868都是有效的代碼。不一定是一對一的映射; 44例如,不僅用於英國,還用於馬恩島,根西島和澤西島。<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>還必鬚根據撥號的位置更改數字。從國外,要撥打英國號碼,您需要丟棄帶撥號代碼44的前面零和前綴:
<br> 202-456-1111<br>…變成…
<br> ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>>您也可以用雙零替換“”:
>
<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>使事情變得更複雜,有些數字在從一個國家 /地區召喚的情況下會有所不同,具體取決於您從哪個國家 /地區撥打的國家 /地區。例如,在美國,數字也必須以美國退出代碼011為前綴,因此上面的示例變為:
幸運的是,我們可以使用一種格式,使我們能夠解決這些變化。
> e.164
<br> {<br> "name": {<br> "common": "Austria",<br> "official": "Republic of Austria",<br> // ... //<br> },<br> // ... //<br> "callingCode": ["43"],<br> // ... //<br> },<br>幸運的是,對於開發人員而言,
有一個明確的,國際公認的電話號碼,是世界上任何地方的電話號碼,名為E.164。格式分解如下:
>電話號碼的第一部分是國家代碼
我們可以使用相同的格式,例如一個基於倫敦的英國號碼:
>我們可以使用e.164格式表示任何有效的電話號碼。我們知道它指的是哪個國家,而且毫無意義 - 使其成為存儲的理想選擇。它也通常用於基於電話的服務(例如SMS提供商),正如我們稍後會看到的。
>當然有一個漁獲。 E.164標準可能非常適合存儲,但對於兩件事來說很可怕。首先,幾乎沒有人會以這種格式輸入或讀取其號碼。其次,就其可讀性而言,它是絕望的。但是,稍後,當我們看一下libphonenumber時,我們會發現有一些格式化數字的方法。<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>>
收集電話號碼
首先,讓我們看一下收集電話號碼的問題。
><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>> html5和“ tel”輸入
> HTML5引入了一種新的“ TEL”輸入類型。但是,由於格式的變化問題,它實際上並沒有對用戶可以輸入的內容施加任何限制,也不會以與電子郵件元素相同的方式執行任何驗證。但是,有一些優點 - 在移動網站上使用用戶的電話鍵盤通常會顯示,而不是常規的鍵盤佈局。
您可以使用單個元素來收集一個數字:
或者,您可以將數字分解為單獨的元素:
<br> 202-456-1111<br>
>瀏覽器支持非常好(例如,Chrome 6,Firefox 4,Safari 5,即10),但是即使在較舊的瀏覽器中,它也只會落到一個普通的舊文本字段。
>我們是否應該確定正則表達式足夠 - 請記住,存在問題 - 然後我們可以使用模式屬性添加一些驗證:
<br> ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>>屏蔽輸入
但是,如果您知道某些數字將在特定範圍內,則它們可以有效。這是給我們電話號碼的蒙版輸入的示例。
更好的方法
>您也可以在此處進行現場演示。
>用法很簡單 - 確保您已包括jQuery,庫和CSS文件,並且Flag Sprite可用並從CSS中正確引用 - 您會在build/img/flags.png中找到它。 。
接下來,創建一個元素:
最後,將其註入如下:
<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>
>有關配置選項的完整列表,請諮詢文檔。稍後,我們將查看Utilsscript選項,但首先,我們需要深入研究另一個有用的庫。
<br> {<br> "name": {<br> "common": "Austria",<br> "official": "Republic of Austria",<br> // ... //<br> },<br> // ... //<br> "callingCode": ["43"],<br> // ... //<br> },<br>介紹性libphonenumber
幸運的是,我們許多驗證和格式的困境都有解決方案。 Google的LibphoneNumber庫最初是為Android操作系統開發的,提供了各種方法和用戶用於使用電話號碼的方法。更好的是,它已從Java移植到JavaScript,因此我們可以在Web或Node.js應用程序中使用它。
>>您可以從項目主頁上下載庫,如您所期望的 - Google Code。
您也可以通過NPM獲得它。這是項目頁面,然後從命令行安裝:
您也可以使用Bower安裝它:
<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>
如果您正在考慮在前端項目中使用它,但是要警告 - 即使縮小和壓縮,它也超過200kb。
>
首先,導入Phoneutil:現在,您可以使用其parse()方法來解釋電話號碼:
<br> 202-456-1111<br>
我們可以做很多事情。讓我們首先從圖書館導入一些常數。將您的要求聲明更改為以下內容:
<br> ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
現在我們可以執行以下操作:
><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>
現在嘗試在沒有國際撥號代碼的情況下解析數字:
<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>
這將拋出以下例外:
<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>
這是因為沒有解釋數字是為哪個國家,就無法解釋。 parse()方法採用可選的第二個參數,即ISO 3166-1 alpha-2(即兩個字符)國家代碼。
如果您再次嘗試這條線,但是這次將“我們”作為第二個論點,您會發現結果與以前一樣:
<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>
>您也可以使用這些格式來玩法;所有這些也將起作用:
<br> 020 7925 0918<br>
解釋英國編號:
<br> +44 20 7925 0918<br>
>這將輸出以下內容:
<br> 0044 20 7925 0918<br>
>分解一個數字後,您可以對其進行驗證 - 正如我們在下一部分中所看到的。
驗證一個數字
<br> 011 44 20 7925 0918<br>>驗證遵循類似的模式;同樣,有第二個可選的論點,但是如果沒有暗示該國家 /
這是一些有效數字的示例,其中將國家代碼作為第二個參數提供,或者包含在第一個參數中:
如果您不提供國家代碼,或者不含義,則會遇到與以前相同的錯誤:
以下是一些示例,其中驗證失敗,返回false:
<br> +12024561111<br>
但是,請警告
,因為一個無效的數字可能會引發例外:
<br> +442079250918<br>
確定數字類型
有時,知道電話號碼的
<span><span><span><input</span> type<span>="tel"</span> name<span>="number"</span>></span></span>
該函數將解析的電話號碼作為參數:
<span><!-- area code and number --> </span><span><span><span><input</span> type<span>="tel"</span> name<span>="number"</span>></span> </span><span><!-- country code, area code and number --> </span><span><span><span><input</span> type<span>="tel"</span> name<span>="country"</span> size<span>="4"</span>></span> <span><span><input</span> type<span>="tel"</span> name<span>="area"</span> size<span>="6"</span>></span> <span><span><input</span> type<span>="tel"</span> name<span>="number"</span> size<span>="8"</span>></span> </span><span><!-- US-style --> </span>(<span><span><span><input</span> type<span>="tel"</span> size<span>="3"</span>></span>) <span><span><input</span> type<span>="tel"</span> size<span>="3"</span>></span> - <span><span><input</span> type<span>="tel"</span> size<span>="4"</span>></span></span>
作為一個例子,讓我們查詢有關的數字是移動電話還是固定行:
<br> 202-456-1111<br>>似乎是主題的主題,自然會有一個收穫。有時,即使是LibphoneNumber庫也無法確定。例如,我們的數字不能輕易區分;因此,常數pnt.fixed_line_or_mobile。
>我們只需要更改我們的示例代碼即可反映這種不確定性:
也有許多其他可能性。這是當前的完整列表:
<br> ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>
pnt.fixed_line
>有很多電話號碼可以驗證,但不使用。他們可能已經斷開連接,尚未分配,或者也許已經放下了廁所。
>一種方法是要求用戶確認其電話號碼,與您可能要求用戶確認其電子郵件地址的方式幾乎相同。您可以使用Twilio之類的服務發送SMS,甚至可以打電話。
>這是一個非常簡單的代碼段,用於使用Twilio通過SMS生成和發送確認代碼
>然後,要求用戶將代碼輸入您的Web應用程序中的表單以驗證它是一個瑣碎的練習 - 或者您甚至可以允許人們通過回复消息來驗證其數字。
>也有(付費)服務,可以檢查一個數字是否實時為您服務,例如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>法律
與任何個人信息一樣,也有很多法律問題要注意。例如,在英國,電話偏好服務(TPS)是全國電話號碼登記冊,已由不希望接收營銷通信的人們進行了解釋。有付費服務提供API來檢查針對此登記冊的數字。
>可用性注意事項
>您可能還記得jQuery插件具有一個名為utilsscript的較神秘的選項。
此選項使我們能夠利用LibphoneNumber的驗證和格式化功能。選擇一個國家(使用下拉列表或鍵入撥號代碼)之後,它將將文本場轉換為蒙版的輸入,以反映該國家的編號格式。
該插件包含libphoneNumber包裝的版本;如下:
<br> 202-456-1111<br>正如我之前提到的,請記住,由於LibphoneNumber庫的文件大小,應謹慎使用此方法。但是,在構造函數中在此處引用它確實意味著可以按需加載。
顯示電話號碼
> 為此,我們需要鏈接本身的e.164格式 - 例如:
>當然,您可以使用LibphoneNumber庫的格式()方法來渲染e.164版本(pnf.e164)和更具用戶友好的顯示版本。
microdata>我們還可以使用MicroDATA以語義標記電話號碼。這是一個例子;請注意使用itemprop =“電話”來標記鏈接:
<br> ^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$<br>>
在本文中,我們打開了黃蜂巢是電話號碼。到目前
我們已經研究了一些用於收集數字的方法 - “ TEL”輸入類型,掩蓋輸入和INTL-TEL輸入jQuery插件。 然後,我們查看了有關驗證的一些問題,以及為什麼諸如正則表達式之類的常見方法通常不足,尤其是當您國際化時。我們看了Google的LibphoneNumber圖書館;使用它來解析,驗證,顯示和確定電話號碼的類型。
><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>>我們將INTL-TEL輸入插件與LibphoneNumber相結合,以獲得更好的用戶體驗,儘管它以性能為代價。
>
我將為處理電話號碼提出一些建議:
>由於各種國際電話號碼格式,在JavaScript中驗證使用國家代碼的電話號碼可能是一項複雜的任務。為了確保准確的驗證,一種有效的方法是使用Google使用“ LibphoneNumber”庫。該庫提供了用於解析,格式化和驗證電話號碼的全面工具,使其成為為此目的的可靠選擇。
要開始使用,您需要使用NPM安裝“ LibphoneNumber”庫,然後將其導入到JavaScript文件中。導入後,您可以利用圖書館的Phonenumberutil類執行電話號碼驗證。具體來說,ISVALIDNUMBER函數允許您驗證一個解析的電話號碼,如果該號碼有效或錯誤,則返回true。通過使用圖書館的功能來解析電話號碼,您可以確保其遵守與所提供的國家 /地區代碼相關的特定格式和規則。
此方法為使用國家 /地區代碼驗證電話號碼提供了強大的解決方案,提供了準確的手段處理具有不同格式和標準的國際電話號碼。通過實施“ LibphoneNumber”庫,您可以顯著提高JavaScript應用程序中電話號碼驗證的精確性和可靠性。
一旦您擁有正則表達式模式,就可以使用EXEC方法將其應用於電話號碼。 EXEC方法返回包含電話號碼的匹配部分和任何捕獲組的數組。在這種情況下,可以從數組中的第一組訪問捕獲的國家代碼(索引1)。通過遵循此過程,您可以準確地將國家代碼與電話號碼分開,並可以在JavaScript應用程序中進一步使用。
此方法用途廣泛,並且可以適應各種電話號碼格式。無論您是處理用戶輸入還是從外部來源處理電話號碼,此方法都可以確保您可以可靠地提取國家代碼,這是使用國際電話號碼的重要一步。
>格式化電話號碼以確保不同地區的清晰度和兼容性至關重要。國際格式的電話號碼通常由三個主要組件組成:國家代碼,區域代碼(如果適用)和本地電話號碼。國家代碼以加號()為代表,然後是數字代碼,例如美國的1。它是該國或地區的普遍認可的標識符。
在某些情況下,可能包括區域代碼,通常與空間或連字符的數字分開。以下是本地電話號碼,該號碼的長度可能會有所不同,並且可能包含其他分離器或標點符號。國家之間的特定格式可能會有所不同,因此重要的是在可用的情況下遵循當地慣例。通過遵守此結構,您可以確保在國際邊界中易於識別和可用的電話號碼。
以上是在JavaScript中使用電話號碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!