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

- visibility ۰ mode_comment

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

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

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

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

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

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

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

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

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

تا اینجا ورودی های متنی رو اعتبارسنجی کردیم. در جلسه بعد اعتبارسنجی اعداد و ایمیل و URL رو نیز بررسی خواهیم کرد و شما رو با اونا آشنا میکنیم.

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

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

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

یا علی

Source

comment دیدگاه کاربران
ارسال نظرات

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