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



visibility  
mode_comment   ۰

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

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

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

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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

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

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

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

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

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

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

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

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

یا علی

Source

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

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