معرفی پلاگین Mask جی کوئری برای مدیریت بهتر فرم‌ها

پلاگین Mask راه حل خوبی هست برای ساخت فرم‌هایی که کاربر راحت‌تر، سریع و صحیح تکمیل کنه و اطلاعات لازم رو به سرویس یا سایت مربوطِ بفرسته. برای مثال در نظر بگیریم که فیلد‌ها فرم ما از موارد زیر تشکیل شده. تاریخ، شماره شبا و کارت بانکی، مبلغ که دارای حد مشخصی هست و الی‌آخر. اگر بخواهیم که چنین فیلدهای رو در فرم به صورت مرسوم قرار بدهیم، هم مدیریت ارسال محتوی از سمت کاربر به سرور کمی مشکل هست و هم اینکه کاربر تا مجبور نباشه فرم‌ها رو درست پر نمیکنه (یکم حق بدیم واقعا کار سختیِ 🙂 ).

برای رفع این مشکل پلاگین‌های زیادی وجود داره یه کی از اونها پلاگین Mask هست که مربوط به کتابخانه جی کوئری هست. برای شروع سورس پلاگین رو میتونم از صفحه گیت هاب دریافت کنید و فایل js که داخل پوشه dist قرار داره رو در فایل مربوطه (html) خودتون فراخوانی کنید. مثل تصویر زیر:

<!-- jQuery Mask Plugin -->
<script type="text/javascript" src="js/jquery.mask.min.js"></script>

بعد از این که فایل جاوااسکریپ رو فراخوانی کردیم، باید برای inputهای که مد نظرم هستن ساختار متانسبشون رو درست کنیم. برای مثال من می‌خوام توی فرمی که آماده می‌کنم کاربر شناسه شبا، شماره کارت بانکی و تاریخ ابطال کارت و شماره تلفنش رو وارد کنه. برای چنین کاری در تصویر زیر مشخص شده که چه باید کرد.

<!-- jQuery Mask Plugin -->
<script type="text/javascript" src="js/jquery.mask.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function () {
//Irit jquery masked inputs

	$('.date').mask('9999/99/99');
	$('.time').mask('99:99:99');
	$('.phone').mask('(999) 999-9999');
	$('.shaba').mask('IR-9999-9999-9999-9999-9999');
	$('.cardnumber').mask('9999-9999-9999-9999');
};)

</script>

و حالا نوبت نوشتن کدها html فرم میرسه. که باید دوکار رو بکنیم.

1. قرار دادن اسلایل مربوطه برای مثال (shaba.) در کلاس input
2. دادن مقدار پیش فرض برای placeholde

<form>
    <div class="form-group">
        <label >Date</label>
        <input type="text" placeholder="17/10/1393" autocomplete="off" maxlength="10" class="date" id="maskedDate">
    </div>
    <div class="form-group">
        <label>Time<label>
        <input type="text" placeholder="05:12:30" autocomplete="off" maxlength="10" class="time" id="maskedTime">
    </div>
</form>

برای مدیریت فرم راه حل های فراوانی وجود داره. اگر شما هم از راه‌حل دیگه‌ای رو استفاده می‌کنید. خیلی خوشحال می‌شیم با ما به اشتراک بگذارید.