آموزش HTML5: صفت Pattern در HTML (قسمت یازدهم)

آموزش قسمت یازدهم آموزش HTML5

💖سلامی به خوشمزگی HTML5 و درودی با طعم Pattern ها تقدیم به شما دانش پذیران خوش قلب💖

دِگَر بار در خدمت شما هستیم با قسمت یازدهم از آموزش HTML5 تحت عنوان آموزش صفت Pattern در HTML. در قسمت های نهم و دهم از سری آموزش های برنامه نویسی تحت وب کار با فرم ها را مورد بررسی قرار دادیم. اما در این آموزش، محل بحث ما اعتبارسنجی فرم ها (Form Validation)در HTML است.

منظور از Validation فرم ها این است که، کاربران اطلاعات خود را تحت یک قالب مشخص برای ما ارسال نمایند. به عنوان مثال: در بخش مربوط به وارد کردن رمز عبور، کاربر باید حداقل 8 کاراکتر وارد نماید. در غیر این صورت با خطا مواجه خواهد شد.

👓برای اعتبارسنجی فرم ها، از صفت Pattern در HTML استفاده می شود👓

برای بررسی اطلاعات وارد شده در فرم ها دو روش وجود دارد:

🔵سمت سرور (Server Side): در این روش نه چندان رایج، ابتدا کاربر روی دکمه ارسال اطلاعات کلیک می کند (تمامی اطلاعات به سرور ارسال می شود) و پس از بررسی های لازم، اگر اطلاعات به درستی وارد شده بود، پیام موفقیت آمیز به کاربر نمایش داده می شود. در غیر این صورت خطاهای مربوطه را به سمع و نظر کاربر محترم خواهیم رسانید😵.

🔵سمت کاربر (Client Side): در روش قبل معمولاً ممکن است کاربران، زمان زیادی را پشت درهای بسته منتظر بمانند. به همین جهت در اغلب موارد برای کنترل ورودی ها از ترکیب کدهای HTML5 و JQuery استفاده می شود که بخش HTML5 رو در این آموزش با هم خواهیم آموخت.

🚀مقدمه چینی دیگر کافیست😤 این شما و این هم فیلم آموزشی صفت Pattern در HTML🚀

 

آموزش صفت Pattern در HTML با فرمت متن و تصویر:

🔴آیا از دیدن ویدیو رنج می برید؟😜

🔴آیا می خواهید همین محتوا را به صورت متن و عکس دریافت نمایید؟🌝

🔴آیا آماده اید برای شروعی از جنس متن و تصویر؟😱

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

آشنایی با مفهوم عبارات با قاعده یا Regular Expression

در حال حاضر خیر، اما بعدها که در حوزه برنامه نویسی گام جدی تری برداشتید (جدی تر از HTML😊)نیاز دارید تا درک عمیق تری در خصوص عبارات باقاعده یا به اختصار Regex داشته باشید.

🔵Regular Expression: یکسری قوانین و الگوهای از پیش تعریف شده (Pre Define)است که به منظور جستجو و اعتبار سنجی روی رشته ها (Strings)ایجاد شده است.

تعداد این الگوها بسیار زیاد است و خبر خوب این که نیازی به حفظ کردن همه آن ها ندارید. صرفاً می توانید به سایت Regexr.com مراجعه کنید و اطلاعات جامعی از این قواعد بدست آورید.

🔻امیدوارم با مثال زیر، مفهوم Regex به خوبی در ذهن شما جای بگیرد🔻

برای توصیف ساده تر Regex بگذارید یک تشبیه غیر علمی داشته باشیم. Regex شبیه HTML است. در HTML هر تگ نشانگر یک عمل خاص است. شاید باورتان نشود ولی تگِ <img> می تواند یک عکس را در صفحه وب نمایش دهد. Regex هم یکسری دستورات ساده دارد که با استفاده از آن ها می توان اطلاعات وارد شده توسط کاربر را اعتبار سنجی کرد و یا کاراکترهای دلخواه ما را در یک عالمه کاراکتر دیگر جستجو نمود.

مثلاً با استفاده از S\ می توان تعیین نمود، اگر کاربر در Text Box نام کاربری، فاصله (Space)وارد کرد، اجازه ارسال اطلاعات داده نشود.

محدودیت تعداد کاراکترهای وارد شده با استفاده از خاصیت Pattern

یکی از پایه ای ترین و ساده ترین دستورات Regex مربوط به محدودیت تعداد کاراکترها می شود. به عنوان مثال: از نظر ما که مدیر ارشد یک پروژه تحت وب هستیم، رمز عبور کمتر از 8 کاراکتر برای هکرها شبیه به یک تفریح و در حد یک شوخی بامزه باشد و به راحتی با حمله های Brute Force رمز بسیاری از کاربران ما را بدست آورده و از اطلاعات آن ها سوء استفاده کنند. برای جلوگیری از چنین اتفاقاتی، لازم است با استفاده از یک Pattern ساده، کاربر را ملزم کنیم تا رمز قوی تری انتخاب نماید.

برای این کار فقط کافیست (همانند تصویر زیر)در خاصیت Pattern کاراکترهای {8} را وارد کنیم. البته با استفاده از الگوی S\ که پیش تر نیز در خصوص آن صحبت شد، می توانیم به کاربر یادآور شویم که رمز عبور نمی تواند دارای فاصله یا Space باشد.

ممکن است برای هدفی خاص، کاربر را در وارد کردن تعداد کاراکترها محدود نماییم. برای تعریف یک بازه فقط کافیست به الگوی بالا، یک Comma (,)و عدد اضافه نمایید.

همانطور که در عکس زیر نیز مشهود است، با وارد کردن الگوی {8,16} کاربر موظف است بین 8 تا 16 کاراکتر در تکست باکس وارد کند.

شما اجازه وارد کردن عدد را ندارید❗

همچنین با به کارگیری صفت Pattern در HTML قادر هستید، به کاربران اجازه ندهید در تکست باکس مورد نظر مقادیری از جنس عدد وارد نماید.

با توجه به عکس زیر الگوی [A-Za-z] کاربر را ملزم می کند تا صرفاً حروف کوچک و بزرگ را وارد نماید و در صورتی که کاربر مقداری از نوع عدد وارد کند، با Error مواجه خواهد شد.

ایجاد محدودیت در حروف کوچک و بزرگ در HTML

با استفاده از الگوی [A-Z] می توان کاربران را محدود به وارد کردن حروف بزرگ انگلیسی نمود. ممکن است این سوال در ذهن شما ایجاد شود که این قطعه کد که به درد ما نمی خورد، چون زبان ما فارسی است.

اگر چشم انداز شما در حد و اندازه طراحی پروژه های داخلی باشد، کاملاً حق با شماست. اما اگر مایل هستید در Scale جهانی سخنی برای گفتن داشته باشید، بهتر است نیم نگاهی هم به این الگوها بیاندازید.

در صورتی که قصد دارید کاربر را به وارد کردن حروف کوچک انگلیسی محدود کنید، می توانید از الگوی [a-z] در خاصیت pattern استفاده نمایید.

جمع بندی آموزش صفت Pattern در HTML از نگاه محمدرضا یعقوبی

در این مطلب کوتاه، سعی شد تا به مختصرترین شکل ممکن موضوع Pattern ها در HTML5 را مورد بررسی قرار دهیم.

💤در حال حاضر به دانش بیشتری درخصوص Regex نیاز ندارید. پس نگران نباشید💤

اگر از ابتدا با سلسله فایل های آموزشی برنامه نویسی تحت وب همراه ما بوده باشید، در این مرحله که هنوز بحث HTML5 را نیز به پایان نرساندیم، نیازی به اطلاعات بیشتر در رابطه با pattern های Regular Expression ندارید. لذا در ادامه اگر نیاز شد به طور مفصل، مهمترین دستورات آن را به شما معرفی خواهیم نمود.

علی ایحال می توانید از سایت Regexr.com به عنوان مرجعی قابل اعتماد بهره مند شوید.

در پایان، امیدوارم مغز شما همواره سرشار از ایده های تازه و کارآمد باشد و جسم شما نیز آمادگی لازم برای اجرای آن ها را داشته باشد.

ارادتمند همه شما خوبان، محمدرضا یعقوبی

 

۲ thoughts on “آموزش HTML5: صفت Pattern در HTML (قسمت یازدهم)

    • محمد رضا یعقوبی
      محمد رضا یعقوبی :

      درود بر شما و تشکر بابت دیدگاه مثبت تون.
      هر هفته یک ویدیو در رابطه با برنامه نویسی تحت وب در سایت قرار خواهد گرفت و این روند را تا آموزش PHP نیز ادامه خواهیم داد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

رونمایی از محصول قدم صفر کسب و کار + گارانتی بی قید و شرط
همین الان توضیحات محصول را می خوانم