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



visibility  
mode_comment   ۰

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

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

همونطور که میدونین اگر برای ورودی input نوع number رو قرار بدیم، اون ورودی فقط اعداد رو قبول میکنه. مرورگر بصورت پیش فرض اجازه نمیده که حروف یا کاراکترهای غیر از عدد رو وارد کنید و اگر کاربر به طریقی اینکار رو انجام بده، یک alert یا پیام بهش نشون میده و اجازه Submit کردن رو بهش نمیده. پشتیبانی مرورگرها برای ورودی عددی input[type="number"] متفاوت است و میتونین برای اینکه پشتیبانی بهتری در مرورگرها داشته باشه از یک پشتیبان با استفاده از pattern استفاده میکنیم. کد زیر رو در نظر بگیرید:

همونطور که میبینید یک pattern نیز علاوه بر نوع number قرار دادیم تا پشتیبانی بهتری از مرورگرها داشته باشه.

بصورت پیش فرض زمانی که از نوع number برای یک ورودی استفاده میکنیم، کاربر فقط اجازه وارد کردن اعداد کامل رو داره و نمیتونه از اعداد اعشاری و ... استفاده بکنه.

همونطور که دیدید عدد اعشاری 1.5 رو وارد کردیم و بر روی Submit کلیک کردیم. مرورگر بصورت اتوماتیک یک alert نمایش میده و بهمون میگه که حق وارد کردن اعداد اعشاری رو نداریم. اگر بخواید به کاربران اجازه وارد کردن اعداد اعشاری رو بدین، میتونین از ویژگی step استفاده کنید. این ویژگی به مرورگر میگه که input مورد نظر، چه بازه عددی رو میتونه قبول کنه. برای مثال اگر ویژگی step رو برابر با 0.1 قرار بدیم، میتونیم اعداد با یک رقم اعشار رو نیز وارد کنیم. اگر 0.01 بزاریم، میتونیم اعداد با دو رقم اعشار رو وارد کنیم و ....

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

اگر بخوایم محدودیت رو برداریم و کاربر بتونه هر عدد با هر تعداد اعشاری رو وارد کنه، میتونیم از مقدار any برای ویژگی step استفاده کنیم. برای پشتیبانی مرورگرهای دیگر از اعداد اعشاری، مقدار pattern رو نیز تغییر میدیم. پس کد بصورت زیر میشه:

اگر قصد داشته باشید که عددی که کاربر وارد میکنه در محدوده خاصی باشه، میتونین از ویژگی های min و max استفاده کنید و برای input حداقل و حداکثر قرار بدین. در اینجا نیز برای پشتیبانی مرورگرهایی که از max و min پشتیبانی نمیکنن، مقدار ویژگی pattern رو تغییر میدیم. مثلا اگر بخوایم یک ورودی داشته باشیم که اعداد بین 3 تا 42 رو فقط قبول بکنه، بصورت زیر عمل میکنیم:

اگر بخواید همه موارد بالا رو تست کنید، میتونین از دموی زیر استفاده کنید:

اعتبارسنجی آدرس ایمیل و URL

اگر برای یک input ویژگی type رو برابر با email قرار بدین، اگر ایمیل وارد شده توسط کاربر معتبر نباشه، یک alert بهش نشون داده میشه و جلوی Submit فرم گرفته میشه. همانند ورودی number، شما میتونین برای پشتیبانی کردن مرورگرهای قدیمی از ویژگی pattern بعنوان fallback یا پشتیبان استفاده کنید.

میشه گفت عبارات منظم برای ایمیل، هر کدام به نوعی مشکل دارند. یکی از بهترین الگوهایی که وجود داره رو در زیر قرار میدیم:

یک نکته که باید در مورد نوع email یادتون بمونه اینه که این ورودی، ایمیلهایی که TLD نداشته باشند رو نیز بعنوان یک ایمیل معتبر قبول میکنه و هیچ اروری رو به کاربر نشون نمیده. منظور از TLD همون بخش sample.com در ایمیل email@sample.com است. پس مثلا اگر برای یک ورودی از نوع email مقدار email@h رو قرار بدیم، هیچ مشکلی پیش نمیاد و فرم ثبت میشه. این موضوع به دلیل استاندارد RFC822 مربوط به ایمیلها است که ایمیلهای مربوط به localhost رو نیز در نظر گرفته.

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

بهمین راحتی. این موارد برای نوع url نیز صادق هستند. میتونین مقدار url رو برای نوع ورودی قرار بدین و مرورگر بصورت اتوماتیک درست بودن url رو بررسی میکنه. در اینجا نیز مثل ایمیل، میتونین TLD رو وارد نکنید و اجباری برای اون نیست. برای پشتیبانی مرورگرهای قدیمی از pattern هم استفاده میکنیم. پس کد بصورت زیر میشه:

اگر میخواید کاربر رو مجبور به وارد کردن TLD کنید و اجازه وارد کردن آدرسهای localhost رو نداشته باشه، میتونین از الگوی زیر استفاده کنید:

بهمین راحتی. با استفاده از دموی زیر میتونین موارد بالا رو تست کنید: در جلسه بعد تاریخ ها رو اعتبارسنجی میکنیم.

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

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

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

یا علی

Source

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

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