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



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه گذشته ساخت Polyfill ها رو ادامه دادیم و شروع به نوشتن تست های مختلف برای ویژگی های Validity کردیم. در این قسمت میخوایم این تست ها رو تموم کنیم و آموزش مربوط به اعتبارسنجی Form ها رو به پایان برسونیم.

در جلسه گذشته دو تست badInput و patternMismatch رو پیاده سازی کردیم. در این جلسه میخوایم دیگر تست ها رو نیز پیاده سازی کنیم.

تست rangeOverflow

برای اینکه تست rangeOverflow خطا داشته باشه و true رو برگشت بده، باید شرایط زیر همزمان برقرار باشند:

  • فیلد مورد نظر ویژگی max داشته باشد
  • فیلد عددی باشد
  • حداقل یک کاراکتر داشته باشد
  • مقدار فیلد بزرگتر از مقدار ویژگی max باشد

کد Javascript مربوط به این تست بصورت زیر میشه:

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

تست rangeUnderflow

همه موارد مانند تست بالا است بغیر از دو مورد زیر:

  • فیلد مورد نظر باید ویژگی min داشته باشد
  • مقدار فیلد از مقدار ویژگی min کمتر باشد

کد مربوط به این تست:

میبینید که اینجا هم از parseInt استفاده شده است.

تست stepMismatch

برای این تست شروط زیر برای true شدن لازم می باشد:

  • فیلد عددی باشد
  • ویژگی step داشته باشد
  • مقدار ویژگی step برابر با any نباشد
  • باقیمانده مقدار فیلد تقسیم بر مقدار step صفر نباشد (برای اینکار از عملگر % یا remainder استفاده میکنیم)

کد مربوط به این تست:

تست toLong

این تست با برقرار شدن همزمان شروط زیر، true رو برگشت میده:

  • فیلد مورد نظر ویژگی maxLength داشته باشد
  • مقدار ویژگی maxLength بزرگتر از 0 باشد
  • تعداد کاراکترهای مقدار ورودی فیلد از مقدار ویژگی maxLength بیشتر باشد

کدهای مربوط به این تست:

تست tooShort

در این حالت همه چیز تقریبا برعکس تست قبل می باشد و باید وجود ویژگی minLength رو مورد بررسی قرار بدیم. کد رو در نظر بگیرید:

تست typeMismatch

این تست یکی از پیچیده ترین حالت ها برای اعتبارسنجی است. باید شرایط زیر رو برای این تست بررسی کنیم:

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

در صورتی که مقادیر وارد شده از الگوی مورد نظر پیروی نکنند، مقدار true برگشت داده میشه. کدهای بصورت زیر خواهند بود:

تست valueMissing

این تست نیز مقداری پیچیده است. در ابتدا باید بررسی کنیم که فیلد مورد نظر ویژگی required دارد یا خیر. اگر داشته باشد باید متناسب با نوع فیلد، سه تست متفاوت رو انجام بدیم.

  • اگر چک باکس یا رادیو باشد، باید مطمئن بشیم که checked باشد و تیک خورده باشد
  • اگر Select menu باشد باید مطمئن بشیم که مقدار برابر با selected باشد
  • فیلد مورد نظر هر نوع دیگری که باشد، باید بررسی کنیم که مقداری دارد یا خیر

کد مربوط به این تست بصورت زیر خواهد شد:

به همین راحتی.

مجموعه کامل تست ها

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

ملاحظات مخصوص برای دکمه های رادیو

در مرورگرهای تحت پوشش، ویژگی required فقط زمانی برای رادیو ها با شکست مواجه میشه که هیچ کدام از المنتهای درون گروه رادیو، checked نباشند. تا اینجای کار و درون Polyfill ما اگر رادیو مورد نظر unchecked باشد و حتی اگر المنتهای دیگر موجود در گروه رادیو checked باشند، باز هم مقدار true برای valueMissing برگشت داده میشه و تست مورد نظر با شکست مواجه میشه.

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

به همین راحتی.

اضافه کردن ویژگی validity به فیلدهای فرم

در پایان اگر Validity State API در مرورگر پشتیبانی نشود، ما validity ساخته شده توسط Polyfill رو اضافه یا بازنویسی میکنیم. ما برای اینکار از Object.defineProperty() استفاده میکنیم. کد زیر رو ببینید:

قرار دادن همه کدها در کنار هم

در اینجا همه کدهای مربوط به polyfill رو قرار میدیم. برای اینکه توابع ما در دامنه سراسری یا Global قرار نگیرند، از IIFE یا immediately invoked function expression استفاده کردیم. بصورت زیر:

با اضافه کردن این کد یا polyfill به سایتتون، مرورگرهای بیشتر از IE9+ نیز از Validity State پشتیبانی میکنند.

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

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

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

یا علی

Source

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

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