Cum se introduce un număr de telefon în formular. Mascarea și validarea câmpului de telefon folosind jQuery. Crearea unei măști de introducere HTML

Acest plugin jQuery vă permite să selectați automat masca de intrare corespunzătoare, pe baza începutului introdus al numărului 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, pluginul dezvoltat poate fi folosit în alte zone dacă regulile de intrare pot fi reprezentate sub forma mai multor măști de intrare.

Introducere Site-urile web necesită introducerea informațiilor despre numărul de telefon. Se întâmplă că fiecare țară are dreptul să-și stabilească propriile reguli de apelare și lungimea numărului, în urma căreia apare periodic confuzii între rezidenții diferitelor țări: unii sunt obișnuiți să indice numărul cu cifra 8, alții cu 8. cifra 0, iar altele cu semnul +. Revizuirea soluțiilor existente Pentru a rezolva cumva complexitatea și a aduce numerele într-un format unificat, există 3 soluții principale:

Utilizatorului i se solicită să introducă numărul folosind o mască de introducere. Avantaj: Afișarea clară a numărului minimizează posibilele erori în număr. Dezavantaj: fiecare țară are propria sa ortografie și lungimea numerelor.

Utilizatorului i se cere să selecteze separat țara și să introducă restul numărului separat; posibil folosind o mască de intrare. Avantaj: capacitatea de a utiliza diferite măști de intrare pentru diferite țări (precum și regiuni dintr-o țară). Dezavantaje: lista de țări (și regiuni din cadrul fiecărei țări) poate fi mare; numărul de telefon încetează să mai existe ca un întreg (sau este necesară preprocesarea înainte de a salva și afișa numărul).

Plasați un semn + în fața numărului (în afara introducerii) și permiteți introducerea numai a numerelor. Avantaje: ușurință în implementare. Dezavantaj: lipsa afișării vizuale a numărului.

Soluția propusă Ca urmare, s-a decis să se modifice masca obișnuită de introducere, astfel încât aceasta să se modifice în funcție de valoarea curentă a numărului. În plus, pe măsură ce introduceți numărul, vi se solicită să afișați numele țării identificate. Această abordare, în mod subiectiv, ar trebui să rezolve toate deficiențele soluțiilor enumerate mai sus.

Ținând cont de faptul 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țiunile posibile pentru numerele de telefon, inclusiv în interiorul țării. Cu toate acestea, din cauza cantității mari de informații procesate manual, este posibil ca inexactitățile să rămână în baza de date colectată. Este planificat să se facă corecții la setul original în timp.

Implementarea software Implementarea jquery.inputmask, care a fost menționată de multe ori pe Habrahabr, a fost folosită ca nucleu al măștii de intrare. Acest plugin este în prezent dezvoltat activ și, în plus, este conceput în așa fel încât să fie destul de ușor să scrieți 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 a se potrivi nevoilor 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 add-on de plug-in peste nucleul principal, care monitorizează (plus interceptează) influențele externe și face modificări ale datelor. Pentru a implementa propriile noastre handlere pentru influențele externe înaintea handlerelor pluginului principal, am folosit plugin-ul jquery.bind-first library 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 să fie sortate într-un mod special. La elaborarea regulilor de sortare au fost adoptate următoarele convenții:

Toate caracterele din masca de introducere sunt împărțite în 2 tipuri: caractere semnificative (în cazul meu, acesta este simbolul #, adică un număr arbitrar și numere 0-9) și caractere decorative (toate celelalte).

O altă diviziune de caractere în masca de introducere este caracterele wildcard (în cazul meu acesta este simbolul #) și toate celelalte.

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

La compararea a 2 măști de intrare caracter cu caracter, sunt luate în considerare doar caracterele semnificative (nu decoratorii).

Caracterele wildcard diferite sunt tratate ca fiind egale, iar alte caractere semnificative sunt comparate pe baza codului lor.

Simbolurile care nu sunt șablon sunt întotdeauna mai mici decât simbolurile șablon și, prin urmare, sunt poziționate mai sus.

Cu cât lungimea caracterelor semnificative din masca de introducere este mai mică, cu atât masca de introducere este considerată mai mică și este poziționată mai sus.

Găsirea unei măști de introducere adecvate 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ă o linie este mai lungă decât o mască de introducere, chiar dacă toate caracterele precedente au trecut testul, masca de introducere este considerată nevalidă. Dacă textul de intrare se potrivește cu mai multe măști de introducere, prima este returnată. Apoi, î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 simbolurile șablon.Procesarea și interceptarea evenimentelor Pentru a preveni conflictele cu gestionatorii de evenimente ai nucleului principal al măștii de intrare, sunt interceptate următoarele evenimente:

keydown - apăsările înapoi și ștergerea tastelor sunt monitorizate pentru a schimba masca de introducere curentă î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 caracterul introdus poate să nu fie permis de masca de introducere originală (deoarece toate caracterele semnificative din el sunt înlocuite cu un metacar), este necesar să verificați noua linie 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 transmis handler-ului nucleului.
paste , input - paste text din clipboard. Înainte de a transfera procesarea în nucleu, este selectată o mască de intrare pentru șirul rezultat din lipirea textului din clipboard. Dacă masca de introducere nu poate fi găsită, textul este tăiat caracter cu caracter de la sfârșit până când textul se potrivește cu cel puțin o mască de introducere. O operație similară este efectuată la corectarea textului dintr-un câmp de introducere prin apelarea funcției val(), precum și la inițializarea unei măști de introducere dacă aceasta este aplicată unui câmp de intrare nevid.
dragdrop , drop - procesarea este similară cu evenimentul paste.
estompare - procesare suplimentară în cazul în care modul de ștergere a textului este activat atunci când focalizarea este pierdută dacă nu satisface masca de introducere. Acest eveniment este interceptat 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 la inițializare).

Exemplu de utilizare Formatul listei de măști O listă 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 o mască de intrare trebuie să fie prezentă pentru 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": " " ), … ] Parametrii de conectare la plugin Înainte de a vă conecta, trebuie să încă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 (fragment de obiect vezi mai sus);
defs - o matrice de caractere wildcard (în cazul meu este simbolul #);
potrivire - o expresie regulată care descrie caractere semnificative (în cazul meu acesta este /|#/);
cheie este numele parametrului obiectului matrice care conține masca de intrare.

Când este conectat, pluginului i se oferă un obiect special care descrie funcționarea acestuia. Acest obiect conține următorul set de parametri:

inputmask - un obiect care conține parametrii trecuți pluginului principal inputmask;
potrivire - o expresie regulată care descrie caractere semnificative, excluzând caracterele joker;
înlocuire - un caracter joker la care vor fi înlocuite toate caracterele semnificative; poate să nu fie prezent în obiectul definiții al obiectului inputmask;
listă - o serie 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ă atunci când masca de intrare este actualizată; primul parametru este un obiect din matrice, a cărui mască de intrare corespunde textului introdus, iar al doilea parametru este acuratețea definiției măștii: adevărat - masca de intrare se potrivește complet, fals - trebuie introduse caractere suplimentare pentru a fi sigur. definiți 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 prezent, valoarea isCompleted este acceptată - ca urmare, metoda returnează true dacă textul corespunzător măștii de potrivire este introdus complet și fals în caz contrar.

Exemplu de conexiune la plugin
Masca de intrare var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( definiții: ( "#": ( validator: "", cardinality: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), potrivire: //, înlocuiți: "# ", list: maskList, listKey: "mask", onMaskChange: function(maskObj, completat) ( if (completed) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(hint); ) else ( $("#descr").html("Mască de intrare"); ) $(this ).attr("placeholder", $(this).inputmask("getemptymask")); ) ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":verificat")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#customer_phone").inputmask("+[###################]", maskOpts.inputmask) .attr("substituent", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Mască de intrare"); ) )); $("#phone_mask").change(); Demonstrație Un exemplu de demonstrație a pluginului dezvoltat este prezentat la

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

De ce aveți nevoie de o mască de intrare?

Masca de introducere arată în ce format trebuie să introduceți datele în câmp. De exemplu, dacă un utilizator 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 în formulare oferă un aspect uniform al datelor introduse, ceea ce simplifică căutarea și gestionarea bazei de date. Conform recomandărilor Netpeak, o mască de introducere a numărului de telefon este un element obligatoriu al formularului de comandă de pe site. Ca orice recomandare practică din partea specialiștilor 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 unui număr pe site era opțional. Pentru a urmări modificările procentului de clienți care completează câmpul „telefon” din formularul de comandă de pe site, am folosit o variabilă personalizată în Google Analytics. În februarie, niciunul dintre cei nouă clienți nu a completat câmpul „telefon”. În martie, am introdus o mască de introducere, 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 luna martie a fost 19 numere, cu 22 de utilizatori completând 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 al centrului de informare: creșterea numărului de intrări în câmpul numărului de telefon cu 15,4%

Site-ul web al clientului oferă servicii pentru redactarea de eseuri, cursuri, disertații și alte lucrări. Numărul de telefon al utilizatorului este de dorit pentru comunicare, dar pe site acest câmp era opțional. Utilizatorul nu a putut completa formularul sau scrie nimic în acest câmp. Ca prima dată, în prima etapă am configurat urmărirea pentru completarea 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. Mai mult decât atât, doar 6 formulare completate nu conțineau numărul de telefon al clientului. În consecință, 90% din formularele de comandă depuse conțineau un câmp telefonic completat corect. Pe parcursul lunii - o creștere de 15,4%, doar datorită introducerii unei măști de introducere a numărului. În sfârșit, un studiu de caz intern al agenției.

Câmpul pentru numere din formularul de comandă de pe site-ul 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 de formulare completate a crescut de la 44% la 83% - cu 39,4%.
După experiment, am implementat masca pe site. Câmpul pentru introducerea unui număr rămâne opțional. Cererea nu va fi procesată doar dacă în acest câmp este introdus un număr incorect. În acest caz, primele cifre din mască se modifică în funcție de țara în care se află utilizatorul site-ului. Dacă vorbim de un formular de precomandă, atunci este interesant de știut cât de mult mai calitative sunt aplicațiile cu numere de telefon. Am luat toate clienții potențiali primiti vreodată prin formularul de precomandă și am calculat procentul celor care s-au convertit în clienți fără și cu număr. Acesta din urmă s-a dovedit a fi cel mai mare cu 0,81%.

Concluzie: dacă o persoană vă lasă numărul său pe formular, aceasta nu garantează transferul de fonduri.

Dacă vorbim de formularul 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 cu numerele de telefon personale ale utilizatorilor. Vom vorbi despre cazuri de reactivare de succes într-una dintre noile noastre 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 introducere a numerelor de telefon și observațiile dvs. privind calitatea aplicațiilor primite.