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

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

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

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

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

<input type="number" pattern="[-+]?[0-9]">

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

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

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

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

<input type="number" step="any" pattern="[-+]?[0-9]*[.,]?[0-9]+">

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

<input type="number" min="3" max="42" pattern="[3-9]|[1-3][0-9]|4[0-2]">

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

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

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

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

<input type="email" pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$">

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

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

<input type="email" title="The domain portion of the email address is invalid (the portion after the @)." pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$">

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

<input type="url" pattern="^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)[email protected])?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*)(?::\d{2,})?(?:[\/?#]\S*)?$">

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

<input type="url" title="The URL is a missing a TLD (for example, .com)." pattern="^(?:(?:https?|HTTPS?|ftp|FTP):\/\/)(?:\S+(?::\S*)[email protected])?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)(?:\.(?:[a-zA-Z\u00a1-\uffff0-9]-*)*[a-zA-Z\u00a1-\uffff0-9]+)*(?:\.(?:[a-zA-Z\u00a1-\uffff]{2,}))\.?)(?::\d{2,})?(?:[/?#]\S*)?$">

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

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

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

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

یا علی

Source

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

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

Matin Akbari

خیلی ممنون توی پروژه ای که داشتم گیر کرده بودم کارم راه افتاد

نیاز به لاگین

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