- چگونه ماژول imagick را فعال کنم
- تخفیف نوروزی ۱۴۰۳
- هدایت کردن پارک دامنه به برگه دلخواه
- فرم ثبت سفارش در php
- مشکل با اضافه کردن دامین ir در کلادفلر
- ارسال ایمیل در هاست اشتراکی با php
- حساب نکردن هزینه پست در بعضی از شهرها
- چگونه کارآموز سئو شویم؟
- چگونه یک فایل htaccess. درست را برای یک وب سایت وردپرس ایجاد کنیم؟
- مشکل ریدایرکت صفحه اصلی
آخرین مطالب
امکانات وب
همونطور که اطلاع دارید در جلسه قبل توضیحاتی در مورد اعتبارسنجی اعداد، ایمیل و URL با استفاده از HTML بهتون دادیم و شما رو با ویژگی های موجود در این زمینه آشنا کردیم. در این جلسه میخوایم با ادامه توضیحات دیگر ویژگی های در خدمتتون باشیم.
اعتبارسنجی تاریخ
تعدادی کمی از input ها هستند که علاوه بر اعتبارسنجی تاریخها، یک انتخاب کننده تاریخ رو در اختیارتون میزارن که به راحتی میتونین تاریخ مورد نظر خودتون رو انتخاب کنید. خبر بد اینه که فقط مرورگرهای Chrome و Edge و Safari مربوط به موبایل این امکانات رو پیاده سازی کردند و بقیه مرورگرها ورودی از نوع تاریخ رو بصورت یک input ساده نمایش میدن. این ویژگی در آینده نزدیک به Firefox نیز اضافه خواهد شد.
مانند همیشه ما از ویژگی pattern برای تحت پوشش قرار دادن مرورگرهای قدیمی استفاده کرده ایم. ورودی از نوع input برای تاریخ از نوع روز/ماه/سال است. کد زیر رو در نظر بگیرید:
<input type="date" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"> |
در مرورگرهایی که از ورودی از نوع date پشتیبانی میکنن، تاریخ انتخابی با فرمت نمایش داده میشه (البته کاربران میتونن با تغییر تاریخ در تنظیمات، فرمت رو تغییر بدهند). اما مقدار در واقع در فرمت هستش. همونطور که اطلاع دارید، Y و M و D به ترتیب نشانگر سال، ماه و روز هستند.
شما باید برای مرورگرهایی که از این ورودی پشتیبانی نمیکنن، یک متن راهنما قرار بدین و فرمت وارد کردن تاریخ صحیح رو بهشون نمایش بدین. مثلا میتونین بگید: "لطفا از فرمت YYYY-MM-DD برای این ورودی استفاده کنید". دموی زیر رو در نظر بگیرید: اگر کد بالا رو در مرورگرهایی که از ورودی date پشتیبانی نمیکنند، مشاهده کنید هیچ مشکلی وجود نداره و کارا به خوبی پیش میره. اما اگر کد بالا رو در مرورگرهایی مثل Chrome و Safari موبایل مشاهده کنید، چون این مرورگرها از این ورودی پشتیبانی میکنند، فرمت پیاده سازی شده توسط خودشون رو به کاربر نمایش میدن. پس خروجی در مرورگرهایی که پشتیبانی میکنن، بصورت زیر خواهد بود:
همونطور که میبینید دو فرمت در خروجی به کاربر نمایش داده میشه و کاربر گیج میشه که کدام یکی از اونا درست است. فرمت 1 همون راهنمایی هست که ما قرار دادیم و فرمت 2، فرمتی هست که خود مرورگر بصورت ذاتی قرار داده. برای حل مشکل میتونیم یه تست کوچک رو انجام بدیم.
برای اینکه این مشکل رو برطرف کنیم، در ابتدا مرورگر مورد نظر را چک و بررسی میکنیم که ورودی از نوع date را پشتیبانی میکند یا خیر و با توجه به نتیجه تست، خروجی رو طوری نمایش میدیم که کاربران گیج نشن. در ابتدا کدهای HTML زیر رو قرار میدیم:
<label for="date">Date <span class="description-date">YYYY-MM-DDD</span></label> <input type="date" id="date" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"> |
میبینید که فرمت راهنمایی که برای مرورگرهایی که پشتیبانی نمیکنن را درون یک span قرار دادیم و یک کلاس description-date رو بهش نسبت دادیم. حالا برای اینکه متوجه بشیم که مرورگر فعلی از ورودی date پشتیبانی میکنه یا خیر، کد Javascript زیر رو قرار میدیم:
1 2 3 4 5 6 7 8 9 10 11 | var isDateSupported = function () { var input = document.createElement('input'); var value = 'a'; input.setAttribute('type', 'date'); input.setAttribute('value', value); return (input.value !== value); }; if (isDateSupported()) { document.documentElement.className += ' supports-date'; } |
میبینید که یک تابع رو تعریف کردیم و بعد از اون با از دستور if خروجی اون رو بررسی کردیم. اگر true باشه پس مرورگر از ورودی date پشتیبانی میکنه و ما کلاس supports-date رو به تگ html اضافه میکنیم. بعد از اون درون CSS کد زیر رو قرار میدیم:
.supports-date .description-date { display: none; } |
میبینید که گفتیم اگر این کلاس وجود داشت، این span مخفی بشه. پس به همین راحتی مشکل را حل کردیم و این راهنما در مرورگرهایی که ورودی date رو پشتیبانی میکنن، دیگه نمایش داده نمیشه. خروجی بصورت زیر میشه: میبینید که مشکل برطرف شده است. به همین راحتی.
دیگر ورودی های از نوع تاریخ:
ورودی از نوع time به کاربر این امکان رو میده که داده از نوع زمان و ساعت رو وارد کنه و همینطور ورودی از نوع month به اونا اجازه میده که ماه/سال رو انتخاب بکنند. کدها بصورت زیر خواهند بود:
<input type="time" pattern="(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9])"> <input type="month" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2]))"> |
میبینید که مجددا از ویژگی pattern برای پشتیبانی مرورگرهای قدیمی استفاده کردیم.
ورودی time فرمت 12 ساعته am و pm (همون قبل از ظهر و بعد از ظهر خودمون) رو داره ولی در واقع مقدار اون 24 ساعته هست. فرمت ورودی month در مرورگرهای تحت پشتیبانی بصورت May 2017 نمایش داده میشه ولی در واقع مقدار value اون فرمت YYYY-MM را دارد.
خب در اینجا نکات مربوط به اعتبارسنجی با HTML به پایان میرسه. تعدادی نکته هست که بهتره اونا رو در نظر داشته باشید.
یک کلاس کاذب بنام وجود داره که میتونین با استفاده از اون به ورودی هایی که نامعتبر هستند، استایل مورد نظرتون رو اعمال کنید. شما نمیتونین به پیام alert مربوط به اعتبارسنجی استایل خاصی رو بدید.
دو تحقیق توسط Christian Holst و Luke Wroblewski در این زمینه انجام گرفته و میتونیم از نتایج اونا استفاده کنیم. بهترین تجربه کاربری برای اعتبارسنجی فرمها اینه که زمانی که کاربر اطلاعات رو وارد کرد و ورودی مورد نظر رو ترک کرد، ارور در صورت وجود به اون نمایش داده بشه و تا زمانی که اون رو برطرف نکنه، بصورت دائم نمایش داده بشه.
در جلسات بعدی اعتبارسنجی توسط Javascript بدون نیاز به هیچ ابزاری رو بررسی میکنیم.
امیدوارم از این مطلب خوشتون اومده باشه.
در جلسات بعدی با ادامه موضوع در خدمتتون هستیم.
موفق و پیروز باشید.
یا علی
Source
سون لرن • آموزش...ما را در سایت سون لرن • آموزش دنبال می کنید
برچسب : اعتبارسنجی,جلسه,اعتبارسنجی,قسمت, نویسنده : استخدام کار 7learn بازدید : 262
آرشیو مطالب
- دی 1394
- بهمن 1394
- اسفند 1394
- دی 1395
- بهمن 1395
- اسفند 1395
- فروردين 1395
- ارديبهشت 1395
- خرداد 1395
- تير 1395
- مرداد 1395
- شهريور 1395
- مهر 1395
- آبان 1395
- آذر 1395
- دی 1396
- بهمن 1396
- اسفند 1396
- فروردين 1396
- ارديبهشت 1396
- خرداد 1396
- تير 1396
- مرداد 1396
- شهريور 1396
- مهر 1396
- آبان 1396
- آذر 1396
- دی 1397
- بهمن 1397
- اسفند 1397
- فروردين 1397
- ارديبهشت 1397
- خرداد 1397
- تير 1397
- مرداد 1397
- شهريور 1397
- آذر 1397
- دی 1398
- بهمن 1398
- اسفند 1398
- ارديبهشت 1398
- تير 1398
- مرداد 1398
- مهر 1398
- آبان 1398
- آذر 1398
- فروردين 1399
- ارديبهشت 1399
- خرداد 1399
- تير 1399
- شهريور 1399
- بهمن 1400
- اسفند 1400
- ارديبهشت 1400
- دی 1401
- بهمن 1401
- اسفند 1401
- ارديبهشت 1401
- خرداد 1401
- تير 1401
- مرداد 1401
- شهريور 1401
- مهر 1401
- آبان 1401
- آذر 1401
- دی 1402
- بهمن 1402
- اسفند 1402
- فروردين 1402
- ارديبهشت 1402
- خرداد 1402
- تير 1402
- مرداد 1402
- شهريور 1402
- مهر 1402
- آبان 1402
- آذر 1402
- فروردين 1403
- ارديبهشت 1403
لینک دوستان
- کرم سفید کننده وا
- دانلود آهنگ جدید
- خرید گوشی
- فرش کاشان
- بازار اجتماعی رایج
- خرید لایسنس نود 32
- هاست ایمیل
- خرید بانه
- خرید بک لینک
- کلاه کاسکت
- موزیک باران
- دانلود آهنگ جدید
- ازن ژنراتور
- نمایندگی شیائومی مشهد
- مشاوره حقوقی تلفنی با وکیل
- کرم سفید کننده واژن
- اگهی استخدام کارپ
- دانلود فیلم
- آرشیو مطالب
- فرش مسجد
- دعا
- لیزر موهای زائد
- رنگ مو
- شارژ