اعتبارسنجی Form ها (جلسه 12) : ساخت Polyfill برای مرورگرهای قدیمی - قسمت 1



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسات گذشته اعتبارسنجی form ها با استفاده از HTML و Javascript رو بصورت کامل به شما آموزش دادیم. در این قسمت و قسمتهای بعدی میخوایم یک Polyfill کم حجم و کوچک رو با هم بسازیم تا بتونیم مرورگرهای بیشتری رو تحت پوشش قرار بدیم. برای ساخت این Polyfill از Validity State API کمک میگیریم و چیزهای دیگه رو نیز در کنار اون قرار میدیم تا بتونیم مرورگرهای IE9 به بالا رو تحت پوشش قرار بدیم.

تست پشتیبانی

اولین کاری که باید انجام بدیم اینه که ببینیم مرورگر فعلی از Validity State API پشتیبانی می کند یا خیر.

برای اینکار یک تابع بنام supported تعریف میکنیم و درون اون با استفاده از متد createElement یک input میسازیم و بعد از اون چک میکنیم که ویژگی validity برای این المنت وجود دارد یا خیر. اگر وجود داشته باشه که به معنای اینه که مرورگر فعلی از Validity State پشتیبانی میکنه.

کد بالا رو در هر مرورگری که باز کنیم و تابع رو اجرا کنیم، یا true دریافت میکنیم یا false. اگر true باشه که به معنای پشتیبانی کردن است و اگر false باشه یعنی مرورگر فعلی از Validity State پشتیبانی نمیکنه.

اینکه بیایم و فقط بودن یا نبودن ویژگی validity رو بررسی کنیم کافی نیست. ما باید مطمئن بشیم که همه موارد مربوط به Validity State بصورت کامل وجود دارند.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

پس تابع supported رو کمی تغییر میدیم تا همه موارد رو مورد بررسی قرار بدیم. بصورت زیر:

مرورگرهایی همانند IE11 و Edge بیشتر این موارد رو دارند ولی بعضی از اونا رو پشتیبانی نمیکنن. به همین دلیل این مرورگرها در این تست رد میشن و false رو بر میگردونن. باید خودمون یچیزی بسازیم که این موارد رو در مرورگرهای این چنینی شبیه سازی کنه.

بررسی اعتبار یا Validity ورودی

کار بعدی که باید انجام بدیم اینه که یک تابع برای بررسی وضعیت اعتبار فیلد ورودی بسازیم و با استفاده از اون یک شئ که شباهت ساختاری با Validity state API داره رو برگشت بدیم.

در ابتدا یک تابع بنام getValidityState میسازیم و یک پارامتر به نام field برای اون در نظر میگیریم.

این تابع قرار هست که یک ورودی یا input رو دریافت کنه و یک شئ مثل Validity state API رو شبیه سازی کنه و برگردونه.

مرحله بعدی اینه که تعدادی متغیر رو در ابتدا تعریف کنیم تا دیگه لازم نباشه هر دفعه کارهای تکراری رو انجام بدیم. بصورت زیر:

میبینید که 3 متغیر تعریف کردیم:

  • type : نوع فیلد وارد شده رو مشخص میکنه
  • isNum : عددی بودن فیلد رو مشخص میکنه. فیلد number و range عددی هستند
  • length : تعداد کاراکتر مقدار فیلد رو مشخص میکنه

از این متغیر ها در قسمتهای بعدی تابع زیاد استفاده میشه. در قسمت بعد با ادامه این موضوع در خدمتتون هستیم.

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

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

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

یا علی

Source

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

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