Masky na telefonní čísla. Maskování a ověřování telefonního pole pomocí jQuery

Tento plugin pro jQuery umožňuje automaticky vybrat vhodnou vstupní masku na základě zadaného začátku telefonního čísla. Díky tomu je zadávání telefonního čísla na webové stránce rychlejší a bez chyb. Kromě toho lze vyvinutý plug-in použít v jiných oblastech, pokud lze vstupní pravidla reprezentovat ve formě několika vstupních masek.

Úvod

Na webových stránkách je velmi nutné zadat informace o telefonním čísle. Stalo se tak, že každá země má právo stanovit si vlastní pravidla vytáčení a délku čísla, v důsledku čehož mezi obyvateli rozdílné země pravidelně dochází k záměně: někteří jsou zvyklí označovat číslo s úvodní číslicí 8, jiní s úvodní číslicí 0 a další se znaménkem +.

Recenze stávajících řešení

Aby bylo možné nějak vyřešit vzniklou složitost a uvést čísla do jediného formátu, existují 3 hlavní řešení:
  1. Uživatel je vyzván k zadání čísla pomocí vstupní masky. Výhoda: přehledné zobrazení čísla minimalizuje možné chyby čísel. Nevýhoda: každá země má svůj vlastní pravopis a délku čísla.
  2. Uživatel je vyzván, aby samostatně vybral zemi a samostatně zadal zbytek čísla; případně pomocí vstupní masky. Výhoda: možnost používat různé vstupní masky pro různé země (a také regiony v rámci země). Nevýhody: Seznam zemí (a regionů v každé zemi) může být velký; telefonní číslo přestane existovat jako celek (nebo je před uložením a zobrazením čísla vyžadováno předběžné zpracování).
  3. Umístěte znaménko + před číslo (mimo vstup) a povolte pouze zadávání čísel. Výhody: snadná implementace. Nevýhoda: nedostatek vizuálního zobrazení čísla.

Navrhované řešení

V důsledku toho bylo rozhodnuto upravit obvyklou vstupní masku tak, aby se měnila v souladu s aktuální hodnotou čísla. Kromě toho budete při zadávání čísla vyzváni k zobrazení názvu definované země. Tento přístup, subjektivně musí vyřešit všechny nevýhody výše uvedených řešení.

S ohledem na skutečnost, že počet zemí na světě je relativně malý, bylo rozhodnuto sestavit seznam vstupních masek pro všechny země. Jako zdroj byly použity informace zveřejněné na webu Mezinárodní telekomunikační unie.

Sběr těchto informací přinesl mnohá překvapení. V procesu shromažďování informací bylo nutné vzít v úvahu všechny možné možnosti telefonní čísla, a to i v rámci země. Nicméně, vzhledem k velký počet ručně zpracované informace, je možné, že ve shromážděné databázi zůstaly nepřesnosti. Počítá se s časem s opravami původní sestavy.

Implementace softwaru

Jako jádro vstupní masky byla použita implementace jquery.inputmask, která byla na Habrahabr mnohokrát zmíněna. Tento plugin je nyní aktivně vyvíjen a navíc je navržen tak, aby pro něj bylo psaní rozšíření celkem snadné. V tomto úkolu se však ukázalo téměř nemožné takové rozšíření napsat. Od té doby jsem původní plugin neupravoval ani nepřepisoval, aby vyhovoval mým potřebám jeho autor nadále aktivně pracuje na rozšiřování funkcionality, v důsledku čehož se aplikace mých úprav může ukázat jako problematická. Musel jsem proto napsat nad hlavní jádro doplňkový plugin, který sleduje (a navíc zachycuje) vnější vlivy a provádí úpravy dat. Za účelem implementace vašich ovladačů vnější vlivy před hlavními ovladači zásuvných modulů byla použita knihovna zásuvných modulů jquery.bind-first.
Třídění povolených vstupních masek
Pro správný výběr nejvhodnější vstupní masky je třeba celou sadu masek speciálním způsobem roztřídit. Při vývoji pravidel třídění byly přijaty následující konvence:
  1. Všechny znaky ve vstupní masce jsou rozděleny do 2 typů: významné symboly(v mém případě se jedná o symbol #, což znamená libovolnou číslici a číslice 0-9) a symboly dekoratérů (vše ostatní).
  2. Dalším rozdělením znaků ve vstupní masce jsou zástupné znaky (v mém případě je to symbol #) a vše ostatní.

Výsledkem jsou následující pravidla řazení v pořadí, v jakém jsou použita:

  1. Při porovnávání 2 vstupních masek znak po znaku se berou v úvahu pouze smysluplné znaky (nikoli dekorátoři).
  2. Různé zástupné znaky jsou považovány za rovnocenné a ostatní významné znaky jsou porovnávány na základě jejich kódu.
  3. Symboly bez šablony jsou vždy menší než symboly šablony a v důsledku toho jsou umístěny výše.
  4. Čím kratší je délka významných znaků ve vstupní masce, tím menší je vstupní maska ​​a tím vyšší je.
Nalezení vhodné vstupní masky
Při porovnávání vstupního textu s další maskou ze seřazeného seznamu se berou v úvahu pouze významné znaky každé masky. Pokud je řetězec delší než vstupní maska, i když byly všechny předchozí znaky ověřeny, vstupní maska ​​se považuje za neplatnou. Pokud vstupnímu textu vyhovuje několik vstupních masek, vrátí se první z nich. Dále jsou v nalezené masce všechny významné symboly (včetně nešablonových) nahrazeny šablonovým, což je kombinace všech symbolů povolených kterýmkoli ze symbolů šablony.
Zpracování a zachycení událostí
Aby se předešlo konfliktům s obsluhou událostí hlavního jádra vstupní masky, jsou zachyceny následující události:
  • keydown- Stisky kláves Backspace a Delete jsou monitorovány - za účelem změny aktuální vstupní masky, než hlavní obslužný program odstraní jeden znak z textu. Kromě toho je sledováno stisknutí klávesy Insert, která mění režim zadávání textu, pro synchronizaci.
  • stisknutí klávesy- protože zadaný znak nemusí být vyřešen původní vstupní maskou (protože všechny významné znaky v ní jsou nahrazeny šablonou), je třeba zkontrolovat nový řádek k uspokojení jedné z povolených masek. Pokud žádné takové masky neexistují, vstup znaků se zahodí, jinak se vstupní maska ​​aktualizuje, načež je událost předána obsluze jádra.
  • vložit, vstup- vkládání textu ze schránky. Před přenosem zpracování do jádra je pro řádek vybrána vstupní maska, která byla získána jako výsledek vložení textu ze schránky. Pokud nebylo možné najít vstupní masku, je text od konce znak po znaku ořezán, dokud text nesplňuje alespoň jednu vstupní masku. Podobná operace se provádí při opravě textu ve vstupním poli voláním funkce val () a také při inicializaci vstupní masky, pokud je aplikována na neprázdné vstupní pole.
  • dragdrop, upustit- zpracování je podobné jako u události vložení.
  • rozmazat - dodatečné zpracování v případě, že je povolen režim mazání textu při ztrátě zaostření, pokud nevyhovuje vstupní masce. Tato událost je zachycena po hlavním handleru, na rozdíl od předchozích.

Všechny události jsou zavěšeny v prostoru inputmask. Tím se zabrání nesprávnému chování při volání inputmask po inicializaci doplňku (protože jádro během inicializace odstraní všechny dříve nainstalované handlery v prostoru inputmask).

Příklad použití

Formát seznamu masek
Seznam masek je pole objektů JavaScriptu, nejlépe se stejnou sadou vlastností. Všechny objekty v poli musí mít alespoň jednu vlastnost, která obsahuje vstupní masku. Název parametru obsahujícího masku může být libovolný. Níže je fragment takového pole:
[… ("Maska": "+7 (###) ### - ## - ##", "cc": "RU", "name_en": "Rusko", "desc_en": "", " name_ru ":" Rusko "," desc_ru ":" "), (" maska ​​":" +250 (###) ### - ### "," cc ":" RW "," name_en ":" Rwanda "," desc_en ":" "," name_ru ":" Rwanda "," desc_ru ":" "), (" maska ​​":" + 966-5 - #### - #### "," cc ":" SA "," name_en ":" Saudská Arábie "," desc_en ":" mobile "," name_ru ":" Saudská Arábie "," desc_ru ":" mobile "), (" maska ​​":" + 966- # - ### - #### "," cc ":" SA "," name_cs ":" Saudská Arábie "," desc_en ":" "," name_ru ":" Saudská Arábie "," desc_ru ":" "), ...]
Parametry připojení pluginu
Před připojením je potřeba načíst a seřadit seznam masek. To se provádí provedením následující funkce:
$ .masksSort = funkce (maskList, defs, match, key)
  • maskList- pole objektů uchovávajících vstupní masky (fragment objektu viz výše);
  • defs- pole symbolů šablony (v mém případě je to symbol #);
  • zápas- regulární výraz popisující významné znaky (v mém případě je to / | # /);
  • klíč- název parametru objektu pole obsahujícího vstupní masku.

Po připojení je pluginu předán speciální objekt, který popisuje jeho práci. Tento objekt obsahuje následující sadu parametrů:

  • vstupní maska- objekt obsahující parametry předané hlavní vstupní masce pluginu;
  • zápas- regulární výraz popisující významné znaky, s výjimkou šablon;
  • nahradit- symbol šablony, který bude nahrazen všemi významnými symboly; Nemusí být přítomen v objektu definice objektu inputmask;
  • seznam- pole objektů popisujících vstupní masky;
  • listKey- název parametru uvnitř objektu, který ukládá vstupní masku;
  • onMaskChange- funkce, která je volána při aktualizaci vstupní masky; jako první parametr je předán objekt z pole, jehož vstupní maska ​​odpovídá zadanému textu a jako druhý je přesnost definice masky: true - vstupní maska ​​plně souhlasí, false - jsou vyžadovány další znaky pro spolehlivé určení masky.

Chcete-li inicializovat plugin, musíte na vstupní pole použít metodu inputmasks:
$ .fn.inputmasks = funkce (maskOpts, režim)

  • maskOpts- objekt popisující práci pluginu;
  • režimu- volitelné; proti v současné době hodnota isCompleted je podporována - v důsledku toho metoda vrátí hodnotu true, pokud je text odpovídající odpovídající masce plně zadán, a v opačném případě vrací hodnotu false.
Příklad připojení pluginu

Demonstrace

Příklad ukázky vyvinutého pluginu je uveden na

Odpověď je na první pohled zřejmá: označte pole „telefonní číslo“ jako požadované. Existují však výklenky, ve kterých může uživatel opustit web kvůli zbytečným povinným polím. Například aplikace, software, stránky prodávající obsah. Čísla uživatelů pro takové projekty jsou však důležitá jako doplňková data, která umožňují v budoucnu komunikovat s potenciálními zákazníky. Navíc existuje jednoduché a efektivní řešení - pomocí vstupní masky. Dokažme to případovými studiemi.

Proč potřebujete vstupní masku?

Vstupní maska ​​ukazuje, v jakém formátu je potřeba zadat data do pole. Pokud například uživatel zadá telefonní číslo bez předčíslí nebo telefonní číslo do pole adresy, nebude moci přejít k další položce. Maska ve formulářích poskytuje jednotný vzhled vstupních dat, což usnadňuje vyhledávání a správu databáze. V doporučeních Netpeak je maska ​​pro zadání telefonního čísla povinným prvkem objednávkového formuláře na webu. Jako každé praktické doporučení našich specialistů je i tato pozice založena na úspěšných klientských případech.

Protože se stránka specializovala na aplikace, pole pro zadání čísla na stránce bylo volitelné. Abychom mohli sledovat změnu procenta zákazníků vyplňujících pole „telefon“ v objednávkovém formuláři na webu, použili jsme vlastní proměnnou v Google Analytics... V únoru žádný z devíti zákazníků nevyplnil pole „telefon“. V březnu jsme představili vstupní masku a uživatelé ji začali vyplňovat. Pro čistotu experimentu bylo pole ponecháno volitelné a nebyly provedeny žádné další změny.
Výsledek za březen - 19 čísel s 22 uživateli, kteří vyplnili přihlášku. Jinými slovy, 85 % uživatelů, kteří si aplikaci objednali, zanechalo své telefonní číslo.

Případová studie webu informačního centra: nárůst počtu vyplnění pole telefonní číslo o 15,4 %

Stránky klienta se zabývají psaním esejů, semestrálních prací, diplomových prací a dalších prací. Pro komunikaci je žádoucí telefonní číslo uživatele, ale na webu bylo toto pole nepovinné. Uživatel nemohl vyplnit formulář ani nic napsat do tohoto pole. Stejně jako poprvé jsme v první fázi nainstalovali sledování vyplnění pole „telefon“ v Google Analytics. V listopadu z 59 žádostí podaných návštěvníky stránek 15 neobsahovalo čísla. To znamená, že společnost obdržela pouze 74,6 % odevzdaných formulářů s vyplněným číslem. Poté jsme do pole telefonu přidali vstupní masku. V prosinci stránka přijala 60 žádostí. Pouze 6 vyplněných formulářů však neobsahovalo telefonní číslo klienta. Následně 90 % odeslaných objednávkových formulářů obsahovalo správně vyplněné pole „telefon“. Meziměsíčně - nárůst o 15,4 %, pouze díky zavedení masky pro zadávání čísel. Konečně - interní případ agentury.

Pole pro čísla v objednávkovém formuláři na webu Netpeak je také nepovinné. Telefonní čísla jsou ale důležitá pro to, aby zákazníci vždy znali číslo a stav své aplikace (tato data zasíláme prostřednictvím SMS), a také pro optimalizaci práce account managerů. Doba experimentu, stejně jako v předchozích příkladech, je dva měsíce. V důsledku vzniku masky pro zadávání čísel vzrostlo procento vyplňování formulářů ze 44 % na 83 % – o 39,4 %.
Po experimentu jsme na web implementovali masku. Pole pro zadání čísla zůstává nepovinné. Přihláška neprojde pouze v případě nesprávného zadání čísla v tomto poli. V tomto případě se první číslice v masce mění v závislosti na zemi, ve které se uživatel webu nachází. Pokud se bavíme o předobjednávkovém formuláři, pak je zajímavé vědět, o kolik lepší je aplikace s telefonními čísly. Vzali jsme všechny aplikace, které kdy obdrželi prostřednictvím předobjednávkového formuláře, a vypočítali procento těch, které převedly na zákazníky bez čísla as ním. Ta se ukázala být nejvíce o 0,81 %.

Výstup: pokud vám někdo ve formuláři zanechá své číslo, není to záruka převodu finančních prostředků.

Pokud mluvíme o formě předobjednávky, v popředí je možnost reaktivace zákazníků, tedy možnosti, které se otevírají marketérům vyzbrojeným základnou osobních telefonních čísel uživatelů. O úspěšných případech reaktivace vám povíme v jednom z nových příspěvků. Mezitím vám doporučujeme přečíst si o opatřeních, která by měla být přijata před jakoukoli akcí s telefonními čísly v databázi. Podělte se v komentářích o své zkušenosti s implementací vstupní masky pro telefonní čísla a sledováním kvality příchozích požadavků.

PODOBNÉ ČLÁNKY