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



visibility  
mode_comment   ۴

همونطور که اطلاع دارید در جلسه گذشته در مورد ساخت Polyfill ها مقدماتی رو قرار دادیم و شروع به ساخت یک تابع کردیم که وظیفه اون بررسی وضعیت اعتبار فیلد مورد نظر می باشد. در این جلسه میخوایم با ادامه این موضوع در خدمتتون باشیم.

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

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

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

میبینید که یک شئ بنام checkValidity ساختیم و در اون همه تست های مورد نظر رو قرار دادیم. میبینید که فعلا مقدار False رو برای اونا قرار دادیم و در ادامه اونا رو کامل میکنیم. همونطور که میبینید ویژگی valid رو اضافه نکردیم. این مورد رو زمانی که بقیه تست ها رو بررسی کردیم به شئ اضافه میکنیم.

هر کدام از تست ها اگر False باشند، به این معنا است که اروری در اون زمینه وجود نداره و ورودی مورد نظر در این زمینه معتبر است. اگر حتی یکی از این تست ها true بشه، پس در کل ورودی مورد نظر معتبر نیست. پس ما باید در این حالت ویژگی valid با مقدار False رو نیز به شئ اضافه کنیم و اون شئ رو در آخر برگشت بدیم. کد زیر رو ببینید:

میبینید تعدادی خط کد جدید نسبت به قبل اضافه شده است. در ابتدا valid رو برابر با true قرار دادیم. بعد از اون یک حلقه برای شئ checkValidity قرار دادیم و با اینکار به همه ویژگی های اون دسترسی خواهیم داشت. اگر حتی یکی از تست ها true باشه، مقدار Valid رو false میکنیم و دستور break رو فراخوانی میکنیم تا از حلقه خارج شویم. بعد از اون هم ویژگی valid رو به شئ checkValidity اضافه میکنیم و در نهایت اون رو برگشت میدیم.

قرار دادن تست ها

همونطور که دیدید تا اینجای کار برای هر کدام از تستها مقدار False رو قرار دادیم. باید بجای این مقادیر، تستهایی رو قرار بدیم تا حالت های مختلف مربوط به فرم ورودی رو بررسی کرده و در صورت تایید و یا عدم تایید بودن اون، مقدار False یا true رو به ما برگشت بدهند. در بیشتر این تستها از عبارات منظم و متد test استفاده شده است.

تست badInput

برای تست badInput ما در ابتدا بررسی میکنیم که فیلد مورد نظر از نوع number یا range هست یا خیر. این کار رو با استفاده از متغیر isNum که در ابتدا تعریف کرده بودیم، متوجه میشیم. شرط دیگه اینه که ورودی حداقل یک کاراکتر داشته باشه و حداقل یکی از کارکترهای اون عددی نباشد. تست بصورت زیر میشه:

اگر شرط بالا صدق کنه، پس متوجه میشیم که درون یک فیلد عددی، یک مقدار غیرعددی وارد شده و در این حالت مقدار true برای تست badInput قرار میگیره.

تست patternMismatch

یکی از تستهای ساده برای بررسی کردن، تست patternMismatch می باشد. این تست با شرایط زیر true خواهد شد:

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

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

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

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

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

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

یا علی

Source

comment دیدگاه کاربران

سلام
خیلی ممنون از سایت کاملتون , دو روزه دارم دنبال این میگردم واقعا عالی هستید

محمد اسفندیاری

خوشحالم که بدردتون خورده موفق باشید

مهرداد نادری

واقعا خوب بود ممنون

محمد اسفندیاری

موفق باشید

ارسال نظرات

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