Маска на телефонен номер в javafx. Маскиране и валидиране на телефонното поле с помощта на jQuery

Този плъгин jQuery ви позволява автоматично да изберете подходящата маска за въвеждане въз основа на въведеното начало на телефонния номер. Това ви позволява да направите въвеждането на телефонен номер на страница на уебсайт по-бързо и без грешки. В допълнение, разработеният плъгин може да се използва в други области, ако правилата за въвеждане могат да бъдат представени под формата на няколко маски за въвеждане.

Въведение Уеб сайтовете изискват въвеждане на информация за телефонен номер. Така се случи, че всяка държава има право да установи свои собствени правила за набиране и дължина на номера, в резултат на което между жителите различни страниОт време на време възниква объркване: някои са свикнали да обозначават числото с водеща цифра 8, други с водеща цифра 0, а трети със знак + Преглед на съществуващите решения, за да разрешат по някакъв начин възникналата сложност и привеждане на числата в унифициран формат, има 3 основни решения:

Потребителят е подканен да въведе номера с помощта на маска за въвеждане. Предимство: Ясното показване на номера минимизира възможните грешки в номера. Недостатък: всяка държава има свой собствен правопис и дължина на номера.

Потребителят трябва да избере държавата отделно и да въведе останалата част от номера отделно; възможно с помощта на маска за въвеждане. Предимство: възможност за използване на различни маски за въвеждане за различни държави (както и региони в рамките на една държава). Недостатъци: списъкът от държави (и региони във всяка държава) може да бъде голям; телефонният номер престава да съществува като едно цяло (или е необходима предварителна обработка преди записване и показване на номера).

Поставете знак + пред числото (извън въвеждането) и позволете да се въвеждат само числа. Предимства: лекота на изпълнение. Недостатък: липса на визуално показване на номера.

Предложено решение В резултат на това беше решено да се промени обичайната маска за въвеждане, така че да се променя в съответствие с текущата стойност на числото. Освен това, докато въвеждате номера, ще бъдете подканени да покажете името на идентифицираната държава. Този подход субективно трябва да реши всички недостатъци на изброените по-горе решения.

Като се има предвид фактът, че броят на държавите в света е сравнително малък, беше решено да се състави списък с маски за въвеждане за всички държави. Като източник е използвана информация, публикувана на сайта международен съюзтелекомуникации.

Събирането на тази информация донесе много изненади. В процеса на събиране на информация е било необходимо да се вземат предвид всички възможни варианти за телефонни номера, включително в страната. Въпреки това, поради голямото количество ръчно обработена информация, е възможно да са останали неточности в събраната база данни. Предвижда се във времето да се направят корекции на първоначалния комплект.

Софтуерна реализация Реализацията на jquery.inputmask, която беше спомената много пъти на Habrahabr, беше използвана като ядро на маската за въвеждане. Този плъгин в момента се разработва активно и освен това е проектиран по такъв начин, че е доста лесно да се пишат разширения за него. В този проблем обаче се оказа почти невъзможно да се напише такова разширение. Не модифицирах или пренаписах оригиналния плъгин, за да отговаря на нуждите ми, защото... неговият автор продължава активно да работи върху разширяването на функционалността, в резултат на което прилагането на моите редакции може да бъде проблематично. Следователно трябваше да напиша добавка за приставка върху основното ядро, която следи (плюс прихваща) външни влияния и прави модификации на данните. За да внедрим нашите собствени манипулатори за външни влияния преди манипулаторите на основния плъгин, ние използвахме плъгина за библиотека jquery.bind-first Сортиране на разрешени маски за въвеждане. За да изберете правилно най-подходящата маска за въвеждане, първо трябва да бъде целият набор от маски сортирани по специален начин. При разработването на правила за сортиране бяха приети следните конвенции:

Всички символи във входната маска са разделени на 2 типа: значими знаци (в моя случай това е символът #, което означава произволно число и числа 0-9) и декоративни знаци (всички останали).

Друго разделение на знаци в маската за въвеждане е заместващи знаци (в моя случай това е символът #) и всички останали.

Резултатът е следните правила за сортиране в реда, в който са приложени:

Когато сравнявате 2 входни маски символ по символ, се вземат предвид само значимите знаци (не декоратори).

Различните заместващи знаци се третират като еднакви, а другите значими знаци се сравняват въз основа на техния код.

Символите без шаблон винаги са по-малки от символите на шаблона и в резултат на това са позиционирани по-високо.

Колкото по-къса е дължината на значимите знаци във входната маска, толкова по-малка се счита входната маска и се позиционира по-високо.

Намиране на подходяща маска за въвеждане Когато сравнявате въведения текст със следващата маска от сортирания списък, се вземат предвид само значимите знаци на всяка маска. Ако ред е по-дълъг от маска за въвеждане, въпреки че всички предшестващи знаци са преминали теста, маската за въвеждане се счита за невалидна. Ако въведеният текст съвпада с няколко маски за въвеждане, се връща първата. След това в намерената маска всички значими символи (включително нешаблонни) се заменят с шаблонен, който е комбинация от всички символи, разрешени от който и да е от шаблонните символи за обработка и прихващане, за да се предотвратят конфликти със събитие манипулатори на основното ядро на маската за въвеждане, се прихващат следните събития:

keydown - натисканията на клавиши backspace и delete се наблюдават, за да се промени текущата маска за въвеждане, преди основният манипулатор да премахне един знак от текста. Освен това натискането на клавиша Insert, което променя режима на въвеждане на текст, се следи за синхронизация.
натискане на клавиш - тъй като въведеният знак може да не е разрешен от оригиналната маска за въвеждане (тъй като всички значими знаци в него са заменени с заместващ знак), е необходимо да се провери дали новият ред отговаря на една от разрешените маски. Ако няма такива маски, тогава въведеният знак се отхвърля; в противен случай маската на въвеждане се актуализира, след което събитието се предава на манипулатора на ядрото.
паста , въвеждане - поставяне на текст от клипборда. Преди да прехвърлите обработката към ядрото, се избира входна маска за низа, получен в резултат на поставяне на текст от клипборда. Ако маската за въвеждане не може да бъде намерена, текстът се изрязва символ по знак от края, докато текстът съответства на поне една маска за въвеждане. Подобна операция се извършва при коригиране на текст в поле за въвеждане чрез извикване на функцията val(), както и при инициализиране на маска за въвеждане, ако тя е приложена към непразно поле за въвеждане.
dragdrop , drop - обработката е подобна на събитието paste.
размазване - допълнителна обработка в случай, че режимът за изчистване на текст е активиран при загуба на фокус, ако не отговаря на маската за въвеждане. Това събитие се прихваща след основния манипулатор, за разлика от предишните.

Всички събития са окачени в пространството на входната маска. Това избягва неправилно поведение при извикване на inputmask след инициализиране на добавката (тъй като ядрото премахва всички предварително инсталирани манипулатори в пространството на inputmask при инициализация).

Пример за използване Формат на списък маска Списъкът маска е JavaScript масив от обекти, за предпочитане със същия набор от свойства. Поне едно свойство, което съдържа входна маска, трябва да присъства за всички масивни обекти. Името на параметъра, съдържащ маската, може да бъде произволно. По-долу е даден фрагмент от такъв масив:
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Русия", "desc_en": "", " name_ru": "Русия", "desc_ru": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Руанда", "desc_en": "", "name_ru": "Руанда", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Саудитска Арабия", "desc_en": "мобилен", "name_ru": "Саудитска Арабия", "desc_ru": "мобилен"), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Саудитска Арабия", "desc_en": "", "name_ru": "Саудитска Арабия", "desc_ru": " " ), … ] Параметри за свързване на плъгин Преди да се свържете, трябва да заредите и сортирате списъка с маски. Това става с бягане следваща функция:
$.masksSort = функция (maskList, defs, match, key)

maskList - масив от обекти, съхраняващи маски за въвеждане (фрагмент на обект вижте по-горе);
defs - масив от заместващи знаци (в моя случай това е символът #);
match - регулярен израз, описващ значими знаци (в моя случай това е /|#/);
key е името на параметъра на обекта от масива, съдържащ входната маска.

Когато е свързан, плъгинът получава специален обект, който описва работата му. Този обект съдържа следния набор от параметри:

inputmask - обект, съдържащ параметри, предадени на главния плъгин inputmask;
съвпадение - регулярен израз, описващ значими символи, с изключение на заместващи знаци;
replace - заместващ знак, към който ще бъдат заменени всички значими знаци; може да не присъства в обекта на дефинициите на обекта inputmask;
списък - масив от обекти, описващи входни маски;
listKey - име на параметъра в обекта, съхраняващ входната маска;
onMaskChange - функция, която се извиква при актуализиране на входната маска; първият параметър е обект от масива, чиято входна маска съответства на въведения текст, а вторият параметър е точността на дефинирането на маската: true - входната маска съвпада напълно, false - трябва да бъдат въведени допълнителни знаци, за да надеждно дефинирайте маската.

За да инициализирате приставката, трябва да приложите метода inputmasks към полето за въвеждане:
$.fn.inputmasks = функция (maskOpts, режим)

maskOpts - обект, описващ работата на плъгина;
режим - по желание; в момента се поддържа стойността isCompleted - в резултат на това методът връща true, ако текстът, съответстващ на съвпадащата маска, е въведен напълно и false в противен случай.

Пример за свързване на плъгин
Маска за въвеждане var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "mask"); var maskOpts = ( inputmask: ( дефиниции: ( "#": ( validator: "", cardinality: 1)), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true), match: //, replace: "# ", списък: maskList, listKey: "маска", onMaskChange: функция(maskObj, завършен) ( if (завършен) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(подсказка); else ($("#descr").html("Входна маска"); ) $(this) .attr("placeholder", $(this).inputmask("getemptymask")); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ( $("#customer_phone").inputmasks(maskOpts); ) else ( $ ("#customer_phone").inputmask("+[######################]", maskOpts.inputmask) .attr("placeholder", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Маска за въвеждане"); ) )); $("#phone_mask").change(); Демонстрация Пример за демонстрация на разработения плъгин е представен на

На пръв поглед отговорът е очевиден: маркирайте полето „телефонен номер“, както е необходимо. Но има ниши, в които потребителят може да напусне сайта поради ненужни задължителни полета. Например приложения, софтуер, сайтове за продажба на съдържание. Потребителските номера за такива проекти обаче са важни като допълнителни данни, които правят възможно взаимодействието с потенциални клиенти в бъдеще. Освен това има просто и ефективно решение - използване на маска за въвеждане. Нека докажем това със случаи.

Защо ви е необходима маска за въвеждане?

Маската за въвеждане показва в какъв формат трябва да въведете данните в полето. Например, ако потребител въведе телефонен номер без областен код или телефонен номер в адресното поле, той няма да може да премине към следващия елемент. Маската във формулярите осигурява еднакъв вид на въведените данни, което улеснява търсенето и управлението на базата данни. Според препоръките на Netpeak маската за въвеждане на телефонен номер е задължителен елемент от формата за поръчка на уебсайта. Като всяка практическа препоръка от нашите специалисти, тази разпоредба се основава на успешни случаи на клиенти.

Тъй като сайтът е специализиран в приложения, полето за въвеждане на номер в сайта не е задължително. За да проследим промените в процента клиенти, които попълват полето „телефон“ на формуляра за поръчка на сайта, използвахме персонализирана променлива в Google Analytics. През февруари нито един от деветте клиенти не е попълнил полето „телефон“. През март въведохме маска за въвеждане и потребителите започнаха да я попълват. За чистотата на експеримента полето беше оставено незадължително и не бяха направени други промени.
Резултатът за март беше 19 броя с 22 потребители, попълнили приложението. С други думи, 85% от потребителите, поръчали приложението, са оставили своя телефонен номер.

Казус от практиката на уебсайта на информационния център: увеличение на броя на записите в полетата за телефонни номера с 15,4%

Уебсайтът на клиента предоставя услуги за писане на есета, курсови работи, дисертации и други произведения. Телефонният номер на потребителя е желателен за комуникация, но в сайта това поле не е задължително. Потребителят не можа да попълни формуляра или да напише нещо в това поле. Както за първи път, на първия етап настроихме проследяване за попълване на полето „телефон“ в Google Analytics. През ноември от 59 приложения, оставени от посетители на сайта, 15 не съдържат номера. Тоест компанията е получила само 74,6% от подадените формуляри с попълнен брой. След това добавихме маска за въвеждане към полето за телефон. През декември на сайта са постъпили 60 заявления. Освен това само 6 попълнени формуляра не съдържат телефонен номер на клиента. Следователно 90% от изпратените формуляри за поръчки съдържаха правилно попълнено поле за телефон. За месеца - увеличение от 15,4%, само благодарение на въвеждането на маска за въвеждане на номера. И накрая, вътрешен казус на агенцията.

Полето за номера във формата за поръчка в сайта на Netpeak също не е задължително. Но телефонните номера са важни, за да знаят клиентите винаги номера и статуса на своята заявка (изпращаме тези данни чрез SMS), както и за оптимизиране на работата на акаунт мениджърите. Периодът на експеримента, както в предишните примери, е два месеца. В резултат на появата на маската за въвеждане на номера процентът на попълнени формуляри нараства от 44% на 83% - с 39,4%.
След експеримента внедрихме маската на сайта. Полето за въвеждане на номер остава незадължително. Заявлението няма да бъде обработено само ако в това поле е въведен грешен номер. В този случай първите цифри в маската се променят в зависимост от държавата, в която се намира потребителят на сайта. Ако ние говорим заотносно формата за предварителна поръчка, интересно е колко по-качествени са приложенията с телефонни номера. Взехме всички потенциални клиенти, получени някога чрез формата за предварителна поръчка, и изчислихме процента на тези, които са се превърнали в клиенти без и с номер. Последните се оказват най-много с 0,81%.

Заключение: ако човек ви остави своя номер във формуляра, това не гарантира прехвърлянето на средства.

Ако говорим за формуляра за предварителна поръчка, на преден план излизат възможностите за повторно активиране на клиенти, възможности, които се отварят за търговците, въоръжени с база данни с лични телефонни номера на потребителите. Ще говорим за успешни случаи на повторно активиране в една от новите ни публикации. Междувременно ви съветваме да прочетете за мерките, които трябва да предприемете, преди да предприемете действия с телефонни номера в базата данни. Споделете в коментарите вашия опит с прилагането на маска за въвеждане на телефонни номера и вашите наблюдения върху качеството на входящите приложения.

Въведение Уеб сайтовете изискват въвеждане на информация за телефонен номер. Така се случва, че всяка страна има право да установи свои собствени правила за набиране и дължина на номера, в резултат на което периодично възниква объркване между жителите на различни страни: някои са свикнали да посочват номера с водеща цифра 8, други с водеща цифра 0, а други със знак + Преглед на съществуващите решения За да разрешите по някакъв начин сложността и да приведете числата в унифициран формат, има 3 основни решения:

Като се има предвид фактът, че броят на държавите в света е сравнително малък, беше решено да се състави списък с маски за въвеждане за всички държави. За източник е използвана информация, публикувана на сайта на Международния съюз по телекомуникации.

Резултатът е следните правила за сортиране в реда, в който са приложени:

Когато сравнявате 2 входни маски символ по символ, се вземат предвид само значимите знаци (не декоратори).

keydown - натисканията на клавиши backspace и delete се наблюдават, за да се промени текущата маска за въвеждане, преди основният манипулатор да премахне един знак от текста. Освен това натискането на клавиша Insert, което променя режима на въвеждане на текст, се следи за синхронизация.
натискане на клавиш - тъй като въведеният знак може да не е разрешен от оригиналната маска за въвеждане (тъй като всички значими знаци в него са заменени с заместващ знак), е необходимо да се провери дали новият ред отговаря на една от разрешените маски. Ако няма такива маски, тогава въведеният знак се отхвърля; в противен случай маската на въвеждане се актуализира, след което събитието се предава на манипулатора на ядрото.
паста , въвеждане - поставяне на текст от клипборда. Преди да прехвърлите обработката към ядрото, се избира входна маска за низа, получен в резултат на поставяне на текст от клипборда. Ако маската за въвеждане не може да бъде намерена, текстът се изрязва символ по знак от края, докато текстът съответства на поне една маска за въвеждане. Подобна операция се извършва при коригиране на текст в поле за въвеждане чрез извикване на функцията val(), както и при инициализиране на маска за въвеждане, ако тя е приложена към непразно поле за въвеждане.
dragdrop , drop - обработката е подобна на събитието paste.
размазване - допълнителна обработка в случай, че режимът за изчистване на текст е активиран при загуба на фокус, ако не отговаря на маската за въвеждане. Това събитие се прихваща след основния манипулатор, за разлика от предишните.

Пример за използване Формат на списък маска Списъкът маска е JavaScript масив от обекти, за предпочитане със същия набор от свойства. Поне едно свойство, което съдържа входна маска, трябва да присъства за всички масивни обекти. Името на параметъра, съдържащ маската, може да бъде произволно. По-долу е даден фрагмент от такъв масив:
[ … ( "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Русия", "desc_en": "", " name_ru": "Русия", "desc_ru": "" ), ( "mask": "+250(###)###-###", "cc": "RW", "name_en": " Руанда", "desc_en": "", "name_ru": "Руанда", "desc_ru": "" ), ( "mask": "+966-5-####-####", "cc ": "SA", "name_en": "Саудитска Арабия", "desc_en": "мобилен", "name_ru": "Саудитска Арабия", "desc_ru": "мобилен"), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Саудитска Арабия", "desc_en": "", "name_ru": "Саудитска Арабия", "desc_ru": " " ), … ] Параметри за свързване на плъгин Преди да се свържете, трябва да заредите и сортирате списъка с маски. Това става чрез изпълнение на следната функция:
$.masksSort = функция (maskList, defs, match, key)

maskList - масив от обекти, съхраняващи маски за въвеждане (фрагмент на обект вижте по-горе);
defs - масив от заместващи знаци (в моя случай това е символът #);
match - регулярен израз, описващ значими знаци (в моя случай това е /|#/);
key е името на параметъра на обекта от масива, съдържащ входната маска.

inputmask - обект, съдържащ параметри, предадени на главния плъгин inputmask;
съвпадение - регулярен израз, описващ значими символи, с изключение на заместващи знаци;
replace - заместващ знак, към който ще бъдат заменени всички значими знаци; може да не присъства в обекта на дефинициите на обекта inputmask;
списък - масив от обекти, описващи входни маски;
listKey - име на параметъра в обекта, съхраняващ входната маска;
onMaskChange - функция, която се извиква при актуализиране на входната маска; първият параметър е обект от масива, чиято входна маска съответства на въведения текст, а вторият параметър е точността на дефинирането на маската: true - входната маска съвпада напълно, false - трябва да бъдат въведени допълнителни знаци, за да надеждно дефинирайте маската.

maskOpts - обект, описващ работата на плъгина;
режим - по желание; в момента се поддържа стойността isCompleted - в резултат на това методът връща true, ако текстът, съответстващ на съвпадащата маска, е въведен напълно и false в противен случай.

Подобни статии

Примерно заявление за възстановяване на приспадане на данък върху имуществото

Червените в Гражданската война

Излишни дневни надбавки: застрахователни премии и данъчно облагане Данък при пътуване

Характеристики и съвместимост на жената Рак-Вол Когато Ракът познава реката на Вола, разбира Вола