تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۳۰ مرداد ۱۳۹۶

همونطور که اطلاع دارید در جلسه قبل توضیحاتی در مورد اعتبارسنجی فرمها با استفاده از HTML بهتون دادیم و شما رو با ویژگی‌های required و minlength و maxlength آشنا کردیم. در این جلسه میخوایم با ادامه توضیحات دیگر ویژگی‌های در خدمتتون باشیم.

با استفاده از ویژگی pattern میتونین یک الگو با استفاده از Regular Expression یا عبارات منظم قرار بدین و با اینکار الگوی خاصی رو برای ورودی قرار بدین. اگر اینکار رو انجام بدین، کاربر باید ورودی رو متناسب با این فرمت پر کنه و در غیر اینصورت یک alert به اون نمایش داده میشه. مثلا کد زیر رو در نظر بگیرید:

<input type="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" required>

همونطور که در کد بالا مشاهده می‌کنید یک ورودی از نوع Password رو قرار دادیم و اون رو با استفاده از required ضروری کردیم. در ویژگی pattern هم یک عبارت منظم قرار دادیم که با استفاده از اون کاربر باید رمزی رو وارد کنه که حداقل یک کاراکتر بزرگ، یک کاراکتر کوچک و یک عدد داشته باشه. با اینکار خروجی بصورت زیر خواهد بود:

همونطور که در خروجی و تصویر بالا دیدید، زمانی که شما یک رمز رو وارد کنید و از الگوی مورد نظر تبعیت نکنه، یک notification نمایش داده میشه و میگه که الگو رو رعایت کنید و از Submit شدن فرم جلوگیری میکنه. اگر الگو رو به درستی رعایت کنید، فرم بدون هیچ مشکلی ارسال خواهد شد.

شما همچنین میتونین از ویژگی title به همراه pattern استفاده کنید و این title زمانی که کاربر ورودی اشتباهی رو وارد میکنه به اون نمایش داده میشه. کد زیر رو در نظر بگیرید:

<input type="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" title="Please include at least 1 uppercase character, 1 lowercase character, and 1 number." required>

میبینید که در title متن مورد نظر رو قرار دادیم. با اینکار خروجی بصورت زیر میشه:

میبینید که متنی که در title قرار دادیم در زیر alert قرار گرفته و هنگام خطا به کاربر نمایش داده میشه. شما همچنین میتونین از ویژگی‌های minlength و maxlength نیز استفاده کنید و تعداد کاراکتر حداقل و حداکثر رو مشخص کنید. مثلا کد زیر رو در نظر بگیرید:

<input type="password" minlength="8" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" title="Please include at least 1 uppercase character, 1 lowercase character, and 1 number." required>

با این کد، کاربر باید یک رمز حداقل 8 کاراکتری که دارای حداقل یک کاراکتر بزرگ و یک کاراکتر کوچک و یک عدد هست رو وارد کنه. در غیر اینصورت به مشکل برمیخوره و فرم Submit نمیشه.

اگر بخوایم همه موارد بالا رو بصورت یک خروجی برای شما قرار بدیم، بصورت زیر خواهد بود. میتونین اونا رو تست کرده و خروجی‌ها رو بصورت آنلاین ببینید: تا اینجا ورودی‌های متنی رو اعتبارسنجی کردیم. در جلسه بعد اعتبارسنجی اعداد و ایمیل و URL رو نیز بررسی خواهیم کرد و شما رو با اونا آشنا میکنیم.

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

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

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

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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