Maydon uchun html forma niqobi. jQuery yordamida telefon maydonini niqoblash va tekshirish

Bir qarashda, javob aniq: kerak bo'lganda "telefon raqami" maydonini belgilang. Ammo keraksiz maydonlar tufayli foydalanuvchi saytni tark etishi mumkin bo'lgan joylar mavjud. Masalan, ilovalar, dasturiy ta'minot, kontentni sotish uchun saytlar. Biroq, bunday loyihalar uchun foydalanuvchi raqamlari kelajakda potentsial mijozlar bilan muloqot qilish imkonini beradigan qo'shimcha ma'lumotlar sifatida muhimdir. Bundan tashqari, oddiy va samarali yechim bor - kirish niqobidan foydalanish. Keling, buni misollar bilan isbotlaylik.

Nima uchun sizga kirish niqobi kerak?

Kirish niqobi maydonga ma'lumotlarni qanday formatda kiritish kerakligini ko'rsatadi. Misol uchun, agar foydalanuvchi manzil maydoniga hudud kodi yoki telefon raqamisiz telefon raqamini kiritsa, u keyingi elementga o'ta olmaydi. Shakllardagi niqob kiritilgan ma'lumotlarning bir xil ko'rinishini ta'minlaydi, bu ma'lumotlar bazasini qidirish va boshqarishni soddalashtiradi. Netpeak tavsiyalariga ko'ra, telefon raqamini kiritish niqobi veb-saytdagi buyurtma shaklining zarur elementidir. Mutaxassislarimiz tomonidan berilgan har qanday amaliy tavsiyalar singari, bu qoida mijozlarning muvaffaqiyatli holatlariga asoslanadi.

Sayt ilovalarga ixtisoslashganligi sababli, saytda raqam kiritish maydoni ixtiyoriy edi. Saytdagi buyurtma formasida "telefon" maydonini to'ldiruvchi mijozlar foizidagi o'zgarishlarni kuzatish uchun biz Google Analytics-da maxsus o'zgaruvchidan foydalandik. Fevral oyida to'qqizta mijozning hech biri "telefon" maydonini to'ldirmagan. Mart oyida biz kirish niqobini taqdim etdik va foydalanuvchilar uni to'ldirishni boshladilar. Tajribaning tozaligi uchun maydon ixtiyoriy qoldirildi va boshqa o'zgarishlar kiritilmadi.
Mart oyidagi natija 19 ta masala bo'lib, 22 foydalanuvchi arizani to'ldirdi. Boshqacha aytganda, ilovaga buyurtma bergan foydalanuvchilarning 85 foizi telefon raqamini qoldirgan.

Axborot markazi veb-sayti misolida: telefon raqamlari maydoniga kiritilgan yozuvlar soni 15,4% ga o'sdi

Mijozning veb-sayti insholar, kurs ishlari, dissertatsiyalar va boshqa ishlarni yozish xizmatlarini taqdim etadi. Aloqa uchun foydalanuvchining telefon raqami ma'qul, ammo saytda bu maydon ixtiyoriy edi. Foydalanuvchi anketani to'ldira olmadi yoki bu maydonga hech narsa yoza olmadi. Birinchi marta, birinchi bosqichda biz Google Analytics-da "telefon" maydonini to'ldirish uchun kuzatuvni o'rnatdik. Noyabr oyida saytga tashrif buyuruvchilar tomonidan qoldirilgan 59 ta arizadan 15 tasida raqamlar mavjud emas edi. Ya'ni, kompaniya to'ldirilgan raqam bilan topshirilgan blankalarning atigi 74,6 foizini oldi. Keyin telefon maydoniga kirish niqobini qo'shdik. Dekabr oyida saytga 60 ta ariza kelib tushgan. Bundan tashqari, faqat 6 ta to'ldirilgan shaklda mijozning telefon raqami yo'q edi. Shunday qilib, topshirilgan buyurtma shakllarining 90% telefon maydonida to'g'ri to'ldirilgan. Oy davomida - 15,4% ga o'sish, faqat raqamni kiritish niqobining joriy etilishi tufayli. Va nihoyat, agentlikning ichki ishini o'rganish.

Netpeak veb-saytidagi buyurtma shaklidagi raqamlar maydoni ham ixtiyoriy. Ammo telefon raqamlari mijozlar o'z arizalarining soni va holatini doimo bilishlari uchun (biz bu ma'lumotlarni SMS orqali yuboramiz), shuningdek, hisob menejerlarining ishini optimallashtirish uchun muhimdir. Tajriba muddati, avvalgi misollarda bo'lgani kabi, ikki oy. Raqamni kiritish niqobining paydo bo'lishi natijasida to'ldirilgan blankalar ulushi 44 foizdan 83 foizga - 39,4 foizga oshdi.
Tajribadan so'ng biz saytdagi niqobni amalga oshirdik. Raqamni kiritish maydoni ixtiyoriy bo'lib qoladi. Agar ushbu maydonga noto'g'ri raqam kiritilgan bo'lsa, ariza ko'rib chiqilmaydi. Bunday holda, niqobdagi birinchi raqamlar sayt foydalanuvchisi joylashgan mamlakatga qarab o'zgaradi. Agar biz oldindan buyurtma shakli haqida gapiradigan bo'lsak, unda telefon raqamlari bilan ilovalar qanchalik sifatli ekanligini bilish qiziq. Biz oldindan buyurtma shakli orqali olingan barcha takliflarni oldik va mijozlarga raqamsiz va raqam bilan aylantirilganlarning foizini hisoblab chiqdik. Ikkinchisi 0,81% ga eng ko'p bo'ldi.

Xulosa: agar biror kishi sizga o'z raqamini shaklda qoldirsa, bu pul o'tkazmasini kafolatlamaydi.

Agar oldindan buyurtma shakli haqida gapiradigan bo'lsak, mijozlarni qayta faollashtirish imkoniyatlari, foydalanuvchilarning shaxsiy telefon raqamlari ma'lumotlar bazasi bilan qurollangan marketologlar uchun ochiladigan imkoniyatlar birinchi o'ringa chiqadi. Muvaffaqiyatli qayta faollashtirish holatlari haqida biz yangi postlarimizdan birida gaplashamiz. Shu bilan birga, ma'lumotlar bazasidagi telefon raqamlari bilan har qanday harakatlardan oldin qanday choralar ko'rish kerakligi haqida o'qishni maslahat beramiz. Izohlarda telefon raqamlari uchun kirish niqobini qo'llash tajribangiz va kiruvchi ilovalar sifati bo'yicha kuzatuvlaringizni baham ko'ring.

Ushbu jQuery plagini telefon raqamining kiritilgan boshiga qarab tegishli kirish niqobini avtomatik tanlash imkonini beradi. Bu sizga veb-sayt sahifasiga telefon raqamini tezroq va xatosiz kiritish imkonini beradi. Bundan tashqari, agar kiritish qoidalari bir nechta kirish maskalari ko'rinishida ifodalanishi mumkin bo'lsa, ishlab chiqilgan plagin boshqa sohalarda ham qo'llanilishi mumkin.

Kirish Veb-saytlar telefon raqami ma'lumotlarini kiritishni talab qiladi. Shunday bo'ladiki, har bir mamlakat o'ziga xos terish qoidalari va raqam uzunligini o'rnatish huquqiga ega, buning natijasida vaqti-vaqti bilan turli mamlakatlar aholisi o'rtasida chalkashliklar paydo bo'ladi: ba'zilari raqamni 8 raqami bilan, boshqalari esa etakchi raqam bilan ko'rsatishga odatlangan. Raqam 0 va boshqalar + belgisi bilan Mavjud echimlarni ko'rib chiqing.

Foydalanuvchiga kirish niqobi yordamida raqamni kiritish talab qilinadi. Afzallik: Raqamning aniq ko'rinishi raqamdagi mumkin bo'lgan xatolarni kamaytiradi. Kamchilik: har bir mamlakatning o'ziga xos imlo va raqam uzunligi mavjud.

Foydalanuvchidan mamlakatni alohida tanlash va qolgan raqamni alohida kiritish so'raladi; kiritish niqobidan foydalanish mumkin. Afzallik: turli mamlakatlar (shuningdek, mamlakat ichidagi hududlar) uchun turli xil kirish maskalaridan foydalanish imkoniyati. Kamchiliklari: mamlakatlar ro'yxati (va har bir mamlakat ichidagi mintaqalar) katta bo'lishi mumkin; telefon raqami bir butun sifatida mavjud bo'lishni to'xtatadi (yoki raqamni saqlash va ko'rsatishdan oldin oldindan ishlov berish talab qilinadi).

Raqam oldiga + belgisini qo'ying (kirishdan tashqarida) va faqat raqamlarni kiritishga ruxsat bering. Afzalliklari: amalga oshirish qulayligi. Kamchilik: raqamni vizual ko'rsatishning yo'qligi.

Taklif etilgan yechim Natijada, odatiy kirish niqobini raqamning joriy qiymatiga mos ravishda o'zgarishi uchun o'zgartirishga qaror qilindi. Bundan tashqari, raqamni kiritganingizda, sizdan aniqlangan mamlakat nomini ko'rsatish so'raladi. Ushbu yondashuv, sub'ektiv ravishda, yuqorida sanab o'tilgan echimlarning barcha kamchiliklarini hal qilishi kerak.

Dunyodagi davlatlar soni nisbatan kichik ekanligini hisobga olib, barcha mamlakatlar uchun kirish maskalari ro'yxatini tuzishga qaror qilindi. Manba sifatida Xalqaro elektraloqa ittifoqi veb-saytida e'lon qilingan ma'lumotlardan foydalanildi.

Ushbu ma'lumotlar to'plami ko'plab kutilmagan hodisalar keltirdi. Ma'lumot to'plash jarayonida telefon raqamlarining barcha mumkin bo'lgan variantlarini, shu jumladan mamlakat ichida ham hisobga olish kerak edi. Biroq, qo'lda qayta ishlangan ma'lumotlarning katta miqdori tufayli, to'plangan ma'lumotlar bazasida noaniqliklar qolgan bo'lishi mumkin. Vaqt o'tishi bilan asl to'plamga tuzatishlar kiritish rejalashtirilgan.

Dasturiy ta'minotni amalga oshirish Habrahabrda ko'p marta eslatib o'tilgan jquery.inputmask ilovasi kirish niqobining yadrosi sifatida ishlatilgan. Ushbu plagin hozirda faol ishlab chiqilmoqda va bundan tashqari, unga kengaytmalarni yozish juda oson bo'lgan tarzda ishlab chiqilgan. Biroq, bu muammoda bunday kengaytmani yozish deyarli imkonsiz bo'lib chiqdi. Men asl plaginni ehtiyojlarimga mos ravishda o'zgartirmadim yoki qayta yozmadim, chunki... uning muallifi funksionallikni kengaytirish ustida faol ishlashda davom etmoqda, buning natijasida tahrirlarimni qo'llash muammoli bo'lishi mumkin. Shuning uchun, men asosiy yadro ustida tashqi ta'sirlarni kuzatuvchi (qo'shimcha ravishda ushlab turadigan) va ma'lumotlarga o'zgartirishlar kiritadigan plagin qo'shimchasini yozishim kerak edi. Asosiy plagin ishlovchilaridan oldin tashqi ta'sirlar uchun o'z ishlovchilarimizni amalga oshirish uchun biz jquery.bind-first kutubxona plaginidan foydalandik Ruxsat etilgan kirish maskalarini saralash Eng mos keladigan kirish niqobini to'g'ri tanlash uchun avvalo niqoblar to'plami bo'lishi kerak. maxsus tarzda saralangan. Saralash qoidalarini ishlab chiqishda quyidagi konventsiyalar qabul qilindi:

Kirish niqobidagi barcha belgilar 2 turga bo'linadi: muhim belgilar (mening holimda bu # belgisi, ixtiyoriy sonni va 0-9 raqamlarini bildiradi) va dekorativ belgilar (qolganlari).

Kirish niqobidagi belgilarning yana bir boʻlinishi joker belgilar (mening holimda bu # belgisi) va boshqalar.

Natijada, ularni qo'llash tartibi bo'yicha quyidagi tartiblash qoidalari paydo bo'ladi:

2 ta kirish niqobini har bir belgi bilan taqqoslashda faqat muhim belgilar (dekoratorlar emas) hisobga olinadi.

Turli joker belgilar teng deb hisoblanadi va boshqa muhim belgilar ularning kodi asosida taqqoslanadi.

Shablon bo'lmagan belgilar har doim shablon belgilaridan kichikroq bo'ladi va natijada yuqoriroq joylashadi.

Kirish niqobidagi muhim belgilar uzunligi qanchalik qisqa bo'lsa, kirish niqobi shunchalik kichikroq ko'rib chiqiladi va yuqoriroq joylashadi.

Tegishli kiritish niqobini topish Kiritilgan matnni tartiblangan roʻyxatdagi keyingi niqob bilan solishtirganda har bir niqobning faqat muhim belgilari hisobga olinadi. Agar oldingi barcha belgilar testdan o'tgan bo'lsa ham, chiziq kirish niqobidan uzunroq bo'lsa, kirish niqobi haqiqiy emas deb hisoblanadi. Agar kiritilgan matn bir nechta kiritish maskalariga mos kelsa, birinchisi qaytariladi. Keyinchalik, topilgan niqobda barcha muhim belgilar (shu jumladan shablon bo'lmaganlar) shablon belgilaridan birortasi tomonidan ruxsat etilgan barcha belgilarning kombinatsiyasi bo'lgan shablon bilan almashtiriladi.Hodisalarni qayta ishlash va ushlab turish bilan ziddiyatlarni oldini olish uchun. Kirish niqobining asosiy yadrosi hodisalari ishlov beruvchilari quyidagi hodisalarni ushlab turadi:

keydown - asosiy ishlov beruvchi matndan bitta belgini olib tashlashdan oldin joriy kiritish niqobini o'zgartirish uchun orqaga va o'chirish tugmachalarini bosish kuzatiladi. Bundan tashqari, matn kiritish rejimini o'zgartiruvchi Insert tugmasini bosish sinxronizatsiya uchun nazorat qilinadi.
tugmachani bosish - kiritilgan belgiga asl kirish niqobi ruxsat bermasligi mumkinligi sababli (undagi barcha muhim belgilar joker belgisi bilan almashtirilganligi sababli), ruxsat etilgan niqoblardan birini qondirish uchun yangi qatorni tekshirish kerak. Agar bunday maskalar bo'lmasa, belgilar kiritish o'chiriladi; aks holda, kirish niqobi yangilanadi, shundan so'ng voqea yadro ishlov beruvchisiga uzatiladi.
joylashtirish , kiritish - buferdan matnni joylashtirish. Qayta ishlashni yadroga o'tkazishdan oldin, buferdan matnni joylashtirish natijasida hosil bo'lgan satr uchun kirish niqobi tanlanadi. Agar kiritish niqobi topilmasa, matn oxiridan kamida bitta kirish niqobiga mos kelguniga qadar matn har bir belgi bilan kesiladi. Shunga o'xshash operatsiya val() funktsiyasini chaqirish orqali kiritish maydonidagi matnni tuzatishda, shuningdek, bo'sh bo'lmagan kiritish maydoniga qo'llanilsa, kiritish niqobini ishga tushirishda amalga oshiriladi.
dragdrop , drop - ishlov berish joylashtirish hodisasiga o'xshaydi.
loyqalik - agar kirish niqobini qoniqtirmasa, diqqat yo'qolganda matnni tozalash rejimi yoqilgan bo'lsa, qo'shimcha ishlov berish. Bu hodisa oldingilaridan farqli o'laroq, asosiy ishlov beruvchidan keyin tutiladi.

Barcha hodisalar kirish maskasi maydoniga osilgan. Bu plagin ishga tushirilgandan so'ng kirish maskasiga qo'ng'iroq qilishda noto'g'ri xatti-harakatlardan qochadi (chunki yadro ishga tushirilgandan so'ng kirish maskasi maydonida avval o'rnatilgan barcha ishlov beruvchilarni o'chiradi).

Foydalanish misoli Niqob roʻyxati formati Niqob roʻyxati bir xil xususiyatlar toʻplamiga ega boʻlgan obyektlarning JavaScript massividir. Barcha massiv ob'ektlari uchun kirish niqobini o'z ichiga olgan kamida bitta xususiyat mavjud bo'lishi kerak. Niqobni o'z ichiga olgan parametr nomi o'zboshimchalik bilan bo'lishi mumkin. Quyida bunday massivning bir qismi keltirilgan:
[ … ( "maska": "+7(###)###-##-##", "cc": "RU", "name_en": "Rossiya", "desc_en": "", " name_ru": "Rossiya", "desc_ru": "" ), ( "maska": "+250(###)###-###", "cc": "RW", "name_en": " Ruanda", "desc_en": "", "name_ru": "Rwanda", "desc_ru": "" ), ( "maska": "+966-5-####-####", "cc ": "SA", "name_en": "Saudiya Arabistoni", "desc_en": "mobile", "name_ru": "Saudiya Arabistoni", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Saudiya Arabistoni", "desc_en": "", "name_ru": "Saudiya Arabistoni", "desc_ru": " " ), … ] Plagin ulanish parametrlari Ulanishdan oldin niqoblar roʻyxatini yuklashingiz va saralashingiz kerak. Bu quyidagi funktsiyani bajarish orqali amalga oshiriladi:
$.masksSort = funktsiya (maskList, defs, match, key)

maskList - kirish maskalarini saqlaydigan ob'ektlar majmuasi (ob'ekt fragmenti yuqoriga qarang);
defs - joker belgilar qatori (mening holimda bu # belgisi);
match - muhim belgilarni tavsiflovchi muntazam ibora (mening holimda bu /|#/);
kalit - kirish niqobini o'z ichiga olgan massiv obyekti parametrining nomi.

Ulanganda plaginga uning ishlashini tavsiflovchi maxsus ob'ekt beriladi. Ushbu ob'ekt quyidagi parametrlar to'plamini o'z ichiga oladi:

inputmask - asosiy kirish maskasi plaginiga o'tkazilgan parametrlarni o'z ichiga olgan ob'ekt;
match - joker belgilar bundan mustasno, muhim belgilarni tavsiflovchi muntazam ibora;
almashtirish - barcha muhim belgilar almashtiriladigan joker belgi; inputmask ob'ektining ta'riflar ob'ektida mavjud bo'lmasligi mumkin;
ro'yxat - kirish maskalarini tavsiflovchi ob'ektlar massivi;
listKey - kirish niqobini saqlaydigan ob'ekt ichidagi parametr nomi;
onMaskChange - kirish niqobi yangilanganda chaqiriladigan funksiya; birinchi parametr massivdagi ob'ekt bo'lib, uning kirish maskasi kiritilgan matnga mos keladi, ikkinchi parametr esa niqob ta'rifining aniqligi: true - kirish niqobi to'liq mos keladi, noto'g'ri - ishonchli tarzda qo'shimcha belgilar kiritilishi kerak. niqobni aniqlang.

Plaginni ishga tushirish uchun siz kiritish maydoniga kirish maskalari usulini qo'llashingiz kerak:
$.fn.inputmasks = funktsiya (maskOpts, rejim)

maskOpts - plaginning ishlashini tavsiflovchi ob'ekt;
rejim - ixtiyoriy; hozirda isCompleted qiymati qo'llab-quvvatlanadi - natijada, agar mos niqobga mos matn to'liq kiritilsa, usul "true", aks holda "false" qiymatini qaytaradi.

Plagin ulanish misoli
Kirish maskasi var maskList = $.masksSort($.masksLoad("telefon kodlari.json"), ["#"], /|#/, "maska"); var maskOpts = ( inputmask: ( ta'riflar: ( "#": ( validator: "", kardinallik: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), mos: //, almashtiring: "# ", ro'yxat: maskList, listKey: "mask", onMaskChange: function(maskObj, tugallangan) ( agar (tugallangan) ( var hint = maskObj.name_ru; agar (maskObj.desc_ru && maskObj.desc_ru != "") ( maslahat + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(ishora); ) else ( $("#descr").html("Kirish maskasi"); ) $(bu ).attr("to'ldiruvchi", $(bu).inputmask("getemptymask")); ) ); $("#telefon_mask").change(funksiya() ( agar ($("#telefon_mask").(":checked")) ( $("#customer_telefon").inputmasks(maskOpts); ) else ( $ ("#mijoz_telefon").inputmask("+[###################]", maskOpts.inputmask) .attr("placeholder", $("#) customer_phone").inputmask("getemptymask")); $("#descr").html("Kirish maskasi"); ) )); $("#telefon_mask").change(); Namoyish Ishlab chiqilgan plaginning namoyishi misolida keltirilgan