Măști de telefon. Mascarea și validarea câmpului de telefon cu jQuery

Acest plugin jQuery vă permite să selectați automat o mască de intrare potrivită pe baza începutului introdus al unui număr de telefon. Acest lucru vă permite să faceți introducerea unui număr de telefon pe pagina unui site web mai rapidă și fără erori. În plus, plug-in-ul dezvoltat poate fi utilizat în alte zone, dacă regulile de intrare pot fi reprezentate ca mai multe măști de intrare.

Introducere

Site-urile web necesită introducerea informațiilor despre numărul de telefon. S-a întâmplat că fiecare țară are dreptul să-și stabilească propriile reguli de apelare și lungimea numărului, ca urmare a cărora între rezidenți tari diferite Confuzia apare din când în când: unii sunt obișnuiți să indice numărul cu cifra inițială 8, alții cu cifra inițială 0 și alții cu semnul +.

Prezentare generală a soluțiilor existente

Pentru a rezolva cumva dificultatea care a apărut și pentru a aduce numerele într-un singur format, există 3 soluții principale:
  1. Utilizatorului i se solicită să introducă un număr folosind o mască de introducere. Avantaj: afișarea clară a numărului minimizează posibilele erori în număr. Dezavantaj: fiecare țară are propria ortografie și lungimea numărului.
  2. Utilizatorului i se solicită să selecteze separat o țară și să introducă separat restul numărului; eventual folosind o mască de intrare. Avantaj: Abilitatea de a utiliza diferite măști de introducere pentru diferite țări (precum și regiuni dintr-o țară). Dezavantaje: Lista țărilor (și regiunilor din cadrul fiecărei țări) poate fi lungă; numărul de telefon încetează să mai existe în întregime (sau este necesară preprocesarea înainte de a salva și afișa numărul).
  3. Puneți un semn + în fața numărului (în afara introducerii) și permiteți introducerea numai a cifrelor. Avantaje: ușurință în implementare. Dezavantaj: lipsa afisarii vizuale a numarului.

Soluție sugerată

Ca urmare, s-a decis modificarea mascai obișnuite de intrare, astfel încât să se schimbe în conformitate cu valoarea curentă a numărului. În plus, pe măsură ce introduceți numărul, se propune afișarea numelui țării determinate. Această abordare, subiectiv, ar trebui să rezolve toate neajunsurile soluțiilor enumerate mai sus.

Având în vedere că numărul de țări din lume este relativ mic, s-a decis să se întocmească o listă de măști de intrare pentru toate țările. Ca sursă au fost folosite informațiile publicate pe site-ul Uniunii Internaționale de Telecomunicații.

Culegerea acestor informații a adus multe surprize. În procesul de colectare a informațiilor, a fost necesar să se țină cont de toate opțiuni posibile numere de telefon, inclusiv în interiorul țării. Cu toate acestea, având în vedere un numar mare informații prelucrate manual, este posibil ca inexactitățile să rămână în baza de date colectată. În timp, se plănuiește să se facă corecții la setul inițial.

Implementare software

Implementarea jquery.inputmask a fost folosită ca nucleu al măștii de intrare, care a fost menționat de multe ori pe Habrahabr. Acest plugin este în prezent în curs de dezvoltare activ și, în plus, este conceput în așa fel încât să fie suficient să scriem extensii pentru el. Cu toate acestea, în această problemă s-a dovedit a fi aproape imposibil să scrieți o astfel de extensie. Nu am modificat sau rescris pluginul original pentru nevoile mele, deoarece. autorul său continuă să lucreze activ la extinderea funcționalității, drept urmare aplicarea editărilor mele poate fi problematică. Prin urmare, a trebuit să scriu un plug-in peste nucleul principal, care monitorizează (plus interceptează) influențele externe și modifică datele. Pentru a vă injecta manipulanții influente externeînainte de manipulatorii pluginului principal, a fost folosită biblioteca-plugin jquery.bind-first.
Sortarea măștilor de intrare permise
Pentru a selecta corect cea mai potrivită mască de intrare, întregul set de măști trebuie mai întâi sortat într-un mod special. La elaborarea regulilor de sortare au fost adoptate următoarele convenții:
  1. Toate caracterele din masca de introducere sunt împărțite în 2 tipuri: personaje semnificative(în cazul meu, acesta este simbolul # , adică un număr arbitrar și numerele 0-9) și caracterele decoratoare (tot restul).
  2. O altă diviziune de caractere în masca de introducere este caracterele șablon (în cazul meu este caracterul #) și toate celelalte.

Rezultă următoarele reguli de sortare, în ordinea în care sunt aplicate:

  1. La compararea a 2 măști de intrare caracter cu caracter, sunt luate în considerare doar caracterele semnificative (nu decoratorii).
  2. Caracterele de tipar diferite sunt tratate ca fiind egale, iar alte caractere semnificative sunt comparate pe baza codului lor.
  3. Caracterele fără model sunt întotdeauna mai mici decât caracterele tip model și, prin urmare, sunt plasate mai sus.
  4. Cu cât lungimea caracterelor semnificative din masca de introducere este mai mică, cu atât masca de introducere este mai mică și cu atât este mai mare.
Căutați o mască de introducere adecvată
Când se compară textul introdus cu următoarea mască din lista sortată, sunt luate în considerare doar caracterele semnificative ale fiecărei măști. Dacă șirul este mai lung decât masca de intrare, chiar dacă toate caracterele precedente au trecut testul, masca de intrare este considerată nevalidă. Dacă textul de intrare satisface mai multe măști de introducere, atunci prima este returnată. În plus, în masca găsită, toate caracterele semnificative (inclusiv cele care nu sunt șablon) sunt înlocuite cu unul șablon, care este o combinație a tuturor caracterelor permise de oricare dintre caracterele șablon.
Gestionarea și interceptarea evenimentelor
Pentru a preveni conflictele cu gestionatorii de evenimente ai motorului principal de mască de intrare, sunt interceptate următoarele evenimente:
  • Tasta în jos- sunt urmărite tastele Backspace și Delete - pentru a schimba masca curentă de introducere înainte ca handlerul principal să elimine un caracter din text. În plus, apăsarea tastei Inserare, care schimbă modul de introducere a textului, este monitorizată pentru sincronizare.
  • apăsarea tastei- deoarece este posibil ca caracterul de intrare să nu fie permis de masca de intrare originală (deoarece toate caracterele semnificative din acesta sunt înlocuite cu un șablon), trebuie să verificați linie nouă pentru a satisface una dintre măștile permise. Dacă nu există astfel de măști, atunci introducerea caracterelor este renunțată, în caz contrar, masca de intrare este actualizată, după care evenimentul este transferat la handler-ul nucleului.
  • pastă, intrare- lipiți text din clipboard. Înainte de a trece procesarea în nucleu, este selectată o mască de intrare pentru șirul rezultat din lipirea textului din clipboard. Dacă masca de introducere nu a putut fi selectată, textul este trunchiat caracter cu caracter de la sfârșit - până când textul satisface cel puțin o mască de introducere. O operație similară se realizează la corectarea textului din câmpul de introducere prin apelarea funcției val(), precum și la inițializarea măștii de introducere, dacă aceasta este aplicată unui câmp de introducere nevid.
  • trage si lasa, cădere brusca- procesarea este similară cu evenimentul paste.
  • estompa - prelucrare suplimentarăîn cazul în care modul de ștergere a textului este activat la pierderea focalizării, dacă nu satisface masca de introducere. Acest eveniment este prins după handlerul principal, spre deosebire de cele anterioare.

Toate evenimentele sunt agățate în spațiul masca de intrare. Acest lucru evită comportamentul incorect la apelarea inputmask după inițializarea suplimentului (deoarece nucleul elimină toți handlerele instalate anterior în spațiul inputmask în timpul inițializării).

Exemplu de utilizare

Format listă de măști
Lista de măști este o matrice JavaScript de obiecte, de preferință cu același set de proprietăți. Cel puțin o proprietate care conține masca de intrare trebuie să fie prezentă pe toate obiectele matrice. Numele parametrului care conține masca poate fi arbitrar. Mai jos este un fragment dintr-o astfel de matrice:
[ … ( „mască”: „+7(###)###-##-##”, „cc”: „RU”, „name_en”: „Rusia”, „desc_en”: „”, „ name_ru": "Rusia", "desc_ru": "" ), ( "mască": "+250(###)###-###", "cc": "RW", "name_en": " Rwanda", "desc_en": "", "name_ru": "Rwanda", "desc_ru": "" ), ( "mască": "+966-5-####-####", "cc ": "SA", "name_en": "Arabia Saudită", "desc_en": "mobile", "name_ru": "Arabia Saudită", "desc_ru": "mobil" ), ( "mască": "+966- #-###-####", "cc": "SA", "name_en": "Arabia Saudită", "desc_en": "", "name_ru": "Arabia Saudită", "desc_ru": " "), …]
Opțiuni de conectare la plugin
Înainte de a vă conecta, trebuie să descărcați și să sortați lista de măști. Acest lucru se realizează prin executarea următoarei funcții:
$.masksSort = function(maskList, defs, match, key)
  • maskList- o serie de obiecte care stochează măști de intrare (vezi mai sus pentru un fragment al obiectului);
  • defs- o serie de caractere șablon (în cazul meu, acesta este simbolul #);
  • Meci- o expresie regulată care descrie caractere semnificative (în cazul meu este /|#/);
  • cheie- numele parametrului obiectului matrice care conține masca de intrare.

Când este conectat, un obiect special este transmis pluginului, descriindu-i funcționarea. Acest obiect conține următorul set de parametri:

  • masca de intrare- un obiect care conține parametrii trecuți pluginului principal inputmask;
  • Meci- o expresie regulată care descrie personaje semnificative, cu excepția celor șablon;
  • a inlocui- caracter șablon, care va fi înlocuit cu toate caracterele semnificative; poate să nu fie prezent în obiectul definiții al obiectului inputmask;
  • listă- matrice de obiecte care descriu măștile de intrare;
  • listKey- numele parametrului din interiorul obiectului care stochează masca de intrare;
  • onMaskChange- o funcție care este apelată la actualizarea măștii de intrare; ca prim parametru, este transmis un obiect din matrice, a cărui mască de intrare corespunde textului introdus, iar ca al doilea - acuratețea definiției măștii: adevărat - masca de intrare se potrivește complet, fals - sunt necesare caractere suplimentare pentru a determina în mod fiabil masca.

Pentru a inițializa pluginul, trebuie să aplicați metoda inputmasks în câmpul de intrare:
$.fn.inputmasks = function(maskOpts, mode)

  • maskOpts- un obiect care descrie funcționarea pluginului;
  • modul- optional; în în prezent valoarea isCompleted este acceptată - ca urmare, metoda returnează true dacă textul corespunzător măștii corespunzătoare este introdus complet și fals în caz contrar.
Exemplu de conexiune la plugin

Demonstrație

Un exemplu de demonstrație a pluginului dezvoltat este prezentat pe

La prima vedere, răspunsul este evident: marcați câmpul „număr de telefon” după cum este necesar. Există însă nișe în care un utilizator poate părăsi site-ul din cauza câmpurilor suplimentare obligatorii. De exemplu, aplicații, software, site-uri care vând conținut. Cu toate acestea, numerele de utilizatori pentru astfel de proiecte sunt importante ca date suplimentare care fac posibilă interacțiunea cu potențialii clienți în viitor. În plus, există o soluție simplă și eficientă - utilizarea unei măști de intrare. Să demonstrăm cu cazuri.

De ce avem nevoie de o mască de intrare?

Masca de introducere indică formatul în care datele trebuie introduse în câmp. De exemplu, dacă utilizatorul introduce un număr de telefon fără un prefix sau un număr de telefon în câmpul de adresă, nu va putea trece la următorul articol. Masca de formular oferă o vizualizare uniformă a datelor de intrare, ceea ce simplifică căutarea și gestionarea bazei de date. În recomandările Netpeak, masca de introducere a numărului de telefon este un element obligatoriu al formularului de comandă de pe site. Ca orice recomandare practică a experților noștri, această prevedere se bazează pe cazuri de succes ale clienților.

Întrucât site-ul era specializat în aplicații, câmpul pentru introducerea numărului pe site era opțional. Pentru a urmări modificarea procentului de clienți care completează câmpul „telefon” din formularul de comandă de pe site, am aplicat o variabilă personalizată în Google Analytics. În februarie, niciunul dintre cei nouă cumpărători nu a completat câmpul „telefon”. În martie, am implementat o mască de intrare, iar utilizatorii au început să o completeze. Pentru puritatea experimentului, câmpul a fost lăsat opțional și nu s-au făcut alte modificări.
Rezultatul pentru martie este 19 numere cu 22 de utilizatori care au completat aplicația. Cu alte cuvinte, 85% dintre utilizatorii care au comandat aplicația și-au lăsat numărul de telefon.

Studiu de caz pe site-ul web Clearinghouse: Creștere cu 15,4% a completărilor câmpurilor cu numărul de telefon

Site-ul web al clientului este angajat în servicii de redactare de eseuri, referate, teze și alte lucrări. Numărul de telefon al utilizatorului este de dorit pentru comunicare, dar acest câmp era opțional pe site. Utilizatorul nu a putut completa formularul sau scrie nimic în acest câmp. La fel ca prima dată, în prima etapă am configurat urmărirea completării câmpului „telefon” din Google Analytics. În noiembrie, din 59 de cereri lăsate de vizitatorii site-ului, 15 nu conțineau numere. Adică, compania a primit doar 74,6% din formularele depuse cu un număr completat. Apoi am adăugat o mască de introducere în câmpul de telefon. În decembrie, site-ul a primit 60 de cereri. Totodată, doar 6 formulare completate nu conţineau numărul de telefon al clientului. În consecință, 90% dintre formularele de comandă trimise conțineau un câmp „telefon” completat corect. Pe lună - o creștere de 15,4%, doar datorită introducerii unei măști de introducere a numerelor. În sfârșit - cazul intern al agenției.

Câmpul de număr din formularul de comandă Netpeak este, de asemenea, opțional. Numerele de telefon sunt însă importante pentru ca clienții să cunoască mereu numărul și starea aplicației lor (le trimitem aceste date prin SMS), precum și pentru a optimiza munca managerilor de cont. Perioada de experiment, ca în exemplele anterioare, este de două luni. Ca urmare a apariției măștii de introducere a numărului, procentul completărilor de formulare a crescut de la 44% la 83% - cu 39,4%.
După experiment, am implementat masca pe site. Câmpul pentru introducerea numărului a rămas opțional. Aplicația nu va trece numai dacă în acest câmp este introdus un număr incorect. În același timp, primele cifre din mască se modifică în funcție de țara în care se află utilizatorul site-ului. Dacă vorbim de formularul de precomandă, atunci este interesant de știut cât de mai bune sunt aplicațiile cu numere de telefon. Am preluat toate clienții potențiali primiti vreodată prin formularul de precomandă și am calculat procentul celor care s-au convertit în clienți cu și fără număr. Acesta din urmă s-a dovedit a fi cel mai mult la 0,81%.

Ieșire: dacă o persoană vă lasă numărul său în formular, aceasta nu este o garanție a transferului de fonduri.

Dacă vorbim de forma de precomandă, ies în prim-plan posibilitățile de reactivare a clienților, oportunități care se deschid pentru marketerii înarmați cu o bază de date de numere personale de telefon ale utilizatorilor. Despre cazuri reușite de reactivare vom vorbi într-una dintre noile postări. Între timp, vă sfătuim să citiți despre măsurile care ar trebui luate înainte de orice acțiune cu numerele de telefon în baza de date. Împărtășiți în comentarii experiența dvs. de implementare a unei măști de intrare pentru numerele de telefon și observații privind calitatea solicitărilor primite.

ARTICOLE SIMILARE