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

آخرین مطالب

امکانات وب

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

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

تست پشتیبانی

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

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

var supported = function () {

var input = document.createElement('input');

return ('validity' in input);

};

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

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

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

var supported = function () {

var input = document.createElement('input');

return ('validity' in input && 'badInput' in input.validity && 'patternMismatch' in input.validity && 'rangeOverflow' in input.validity && 'rangeUnderflow' in input.validity && 'stepMismatch' in input.validity && 'tooLong' in input.validity && 'tooShort' in input.validity && 'typeMismatch' in input.validity && 'valid' in input.validity && 'valueMissing' in input.validity);

};

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

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

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

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

var getValidityState = function (field) {

// Run our validity checks...

};

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

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

var getValidityState = function (field) {

// Variables

var type = field.getAttribute('type') || field.nodeName.toLowerCase(); // The field type

var isNum = type === 'number' || type === 'range'; // Is the field numeric

var length = field.value.length; // The field value length

};

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

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

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

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

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

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

یا علی

Source

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : اعتبارسنجی,مرورگرهای, نویسنده : استخدام کار 7learn بازدید : 346 تاريخ : پنجشنبه 27 مهر 1396 ساعت: 13:56

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

آخرین مطالب

امکانات وب