اعتبارسنجی Form ها (جلسه 1) : اعتبارسنجی با HTML - قسمت 1

- visibility ۲ mode_comment

اکثر کتابخانه های Javascript مربوط به اعتبارسنجی فرمها حجیم و سنگین هستند و معمولا به jQuery نیز برای اجرا شدن نیاز دارند. برای مثال فرمهای مربوط به Mailchimp که میتونیم اونا رو درون سایتمون قرار بدیم، فایل فشرده شده ای برای اعتبارسنجی به همراه دارند که 140 کیلوبایت حجم دارد! این فایل فشرده شامل jQuery و یک پلاگین مخصوص برای اعتبارسنجی و همچنین شامل کدهای اختصاصی Mailchimp است. میبنید که حجم این کد خیلی زیاد است و باید فکری به حال این مشکل بکنیم.

در این سری مطالب مربوط به اعتبارسنجی، 2 روش سریع و سبک برای اعتبارسنجی فرمها رو با هم بررسی میکنیم. در هر 2 روش از متد و API جدید استفاده میکنیم. همچنین کاری میکنیم که کدهای ما پشتیبانی خوبی از مرورگرها داشته باشه و حتی مرورگر IE9 رو پشتیبانی بکنه. با اینکار تقریبا 99.6% ترافیکی که وارد سایتمون میشه با هیچ مشکلی مواجه نخواهند شد.

info نکته :

این نکته رو باید بخاطر بسپارید که اعتبارسنجی که سمت کاربر انجام میشه از طریق مختلفی قابل نفوذ و رد شدن است و حتما باید فرمها رو علاوه بر سمت کاربر، در سمت سرور نیز اعتبارسنجی کنید.

خب پس این آموزش رو شروع میکنیم.

روش بسیار ساده اعتبارسنجی در HTML

با استفاده ترکیبی از انواع ورودی های Semantic (مانند <input type="email">) و ویژگی های اعتبارسنجی (مانند required و pattern)، مرورگرها بصورت اتوماتیک میتونن معتبر بودن داده ورودی رو بررسی کنند و در صورت وجود اخطار به کاربر خطای مورد نظر رو نشان بدن.

پشتیبانی انواع ورودی و ویژگی های اعتبارسنجی برای همه مرورگرها به یک صورت نیست و تفاوتهایی با هم دارند. اما در این آموزشها روشهایی رو بهتون معرفی میکنیم که با استفاده از اونا میتونین بیشترین پشتیبانی رو در مرورگرها به وجود بیارید.

اعتبارسنجی ساده متن

فرض کنیم که یک ورودی متنی داریم و کاربر حتما باید این field رو قبل از submit کردن فرم، پر بکنه. شما به راحتی با اضافه کردن ویژگی required به ورودی مورد نظر باعث میشید که دو کار انجام بشه. اگر ورودی مورد نظر خالی باشه و کاربر فرم رو Submit کنه، علاوه بر اینکه فرم مورد نظر ارسال نخواهد شد، یک alert به اون نمایش داده میشه و از اون میخواد که ابتدا فیلد مورد نظر رو پر بکنه. کد بصورت زیر است:

خروجی در Chrome بصورت زیر میشه:

میبینید که پیام مورد نظر به کاربر نمایش داده میشه و کاربر متوجه میشه که باید این ورودی رو پر کنه. همچنین میتونین از ویژگی های minlength و maxlength برای قرار دادن تعداد حداقل و حداکثر کاراکترها استفاده کنید. مثلا برای اینکه بخواید از کاربر متنی رو دریافت کنید که بین 3 تا 12 کاراکتر داشته باشه، میتونین بصورت زیر عمل کنید:

با اینکار زمانی که کمتر از 3 کاراکتر وارد کنید و بر روی دکمه Submit کلیک کنید، با alert زیر مواجه خواهید شد:

به همین راحتی.

امیدوارم از این مطلب خوشتون اومده باشه.

در جلسات بعدی با ادامه موضوع در خدمتتون هستیم.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران
Mohsen Astane

ممنون دوست گرامی خسته نباشی

محمد اسفندیاری

خواهش میکنم دوست عزیز
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.