کتابخانه
vue-tel-input یه کامپوننت Vue برای گرفتن شماره تلفن تو فرم هاست. کنار فیلد ورودی یه منوی کشورها با پرچم و پیش شماره می ذاره و کمک می کنه شماره رو با قالب درست بگیری و اعتبارش رو بسنجی. با مجوز MIT منتشر شده و برای فرم های ثبت نام و سفارش خوب جواب می ده.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۸۴۷ کیلوبایت· ۶ فایل· انتشار
SHA-256: 2f93da410924120add27c03aefbef13052a65de5b92ed31d71c443bf6d19e063
فیلد شماره تلفن تو فرم ها همیشه دردسر داره. یکی 09121234567 می نویسه، یکی +98 912 123 4567، یکی هم وسطش فاصله و خط تیره می ذاره. vue-tel-input برای همین دردسر ساخته شده. یه کامپوننت Vue که شبیه کتابخونه معروف intl-tel-input کار می کنه. کنار فیلد یه منوی کشورها با پرچم و پیش شماره می بینی. کاربر کشورش رو انتخاب می کنه و شماره رو با قالب درست وارد می کنه. مقدار شماره هم با v-model دست خودته و می تونی بفهمی معتبر هست یا نه.
کجا به درد می خوره؟ هر پروژه ای که با Vue نوشته شده، چه یه اپ تک صفحه ای، چه پروژه ای روی Nuxt. فرم ثبت نام با کد تایید پیامکی، فرم سفارش فروشگاه، فرم تماس شرکتی، یعنی همه جایی که شماره باید کامل و درست ذخیره بشه. برای سایت های ایرانی وقتی بیشتر ارزش داره که مشتری خارج از کشور هم داری، مثلاً ایرانی های مقیم خارج یا مشتری های کشورهای همسایه. کشور پیش فرض رو ایران می ذاری و بقیه کشورها فقط یه کلیک فاصله دارن.
کجا نه؟ اگه سایتت وردپرسیه، فرم هات با افزونه های آماده یا jQuery کار می کنن و Vue تو پروژه نیست، آوردن Vue فقط برای یه فیلد صرف نمی کنه. اگه هم فقط شماره موبایل ایرانی می گیری، یه input ساده با الگوی اعتبارسنجی خودت کافیه و منوی کشورها فقط شلوغی اضافه می کنه.
چند نکته موقع انتخاب و استفاده. اول، نسخه مخصوص Vue قدیمی با نسخه Vue جدید فرق داره. قبل از دانلود ببین پروژه ات با کدوم جور درمیاد. دوم، اعتبارسنجی سمت مرورگر فقط برای راحتی کاربره. سرور باید شماره رو دوباره بررسی کنه، و بهتره شماره رو با قالب بین المللی و با + ذخیره کنی که بعداً تو سامانه پیامک دردسر نشه. سوم، اگه کاربرها با کیبورد فارسی عدد می زنن، رفتار فیلد رو تست کن و اگه لازم شد ارقام فارسی رو خودت تبدیل کن.
نسخه های رسمی و بدون تغییر این کتابخونه تو مخزن داخلی ما هم هست. پس وقتی دسترسی به npm یا اینترنت بین الملل کند شد، می تونی از همین جا برداری.
کار با این کتابخونه چند قدم بیشتر نیست:
یه کامپوننت Vue برای فیلد شماره تلفنه. منوی کشورها با پرچم و پیش شماره داره، شماره رو موقع تایپ مرتب می کنه و می تونی اعتبارش رو هم بسنجی. تو فرم های ثبت نام، سفارش و تماس که شماره باید درست و کامل ذخیره بشه به کار می یاد.
فقط اگه بخش فرم ات با Vue ساخته شده باشه. این کتابخونه یه کامپوننت Vue حساب می شه و بدون Vue کار نمی کنه. برای فرم های ساده وردپرس که با افزونه یا jQuery کار می کنن، یه کتابخونه شماره تلفن مستقل از فریم ورک انتخاب بهتریه.
کامپوننت یه تنظیم برای کشور پیش فرض داره که با کد دو حرفی کشور مقدار می گیره. برای ایران همون IR رو بده. اسم دقیق تنظیم و شکل نوشتنش رو از مستندات نسخه ای که برداشتی چک کن، چون ممکنه بین نسخه ها کمی فرق کنه.
سمت سرور هم چک کن. اعتبارسنجی مرورگر فقط تجربه کاربر رو بهتر می کنه و می شه دورش زد. بهتره سرور شماره رو دوباره بررسی کنه و با قالب بین المللی ذخیره کنه تا بعداً تو ارسال پیامک و تماس مشکلی پیش نیاد.
این رو مطمئن نمی تونم بگم، چون بسته به نسخه و مرورگر فرق می کنه. بهتره خودت تست کنی. اگه فیلد ارقام فارسی رو قبول نکرد، قبل از دادن مقدار به کامپوننت یا قبل از ارسال به سرور، ارقام رو به لاتین تبدیل کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.