تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۲۸ مهر ۱۳۹۶

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

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

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
 
};

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

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

// Generate the field validity object
var getValidityState = function (field) {

    // Variables
    var type = field.getAttribute('type') || input.nodeName.toLowerCase();
    var isNum = type === 'number' || type === 'range';
    var length = field.value.length;

    // Run validity checks
    var checkValidity = {
        badInput: false, // value does not conform to the pattern
        rangeOverflow: false, // value of a number field is higher than the max attribute
        rangeUnderflow: false, // value of a number field is lower than the min attribute
        stepMismatch: false, // value of a number field does not conform to the stepattribute
        tooLong: false, // the user has edited a too-long value in a field with maxlength
        tooShort: false, // the user has edited a too-short value in a field with minlength
        typeMismatch: false, // value of a email or URL field is not an email address or URL
        valueMissing: false // required field without a value
    };

};

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

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

// Generate the field validity object
var getValidityState = function (field) {

    // Variables
    var type = field.getAttribute('type') || input.nodeName.toLowerCase();
    var isNum = type === 'number' || type === 'range';
    var length = field.value.length;

    // Run validity checks
    var checkValidity = {
        badInput: false, // value does not conform to the pattern
        rangeOverflow: false, // value of a number field is higher than the max attribute
        rangeUnderflow: false, // value of a number field is lower than the min attribute
        stepMismatch: false, // value of a number field does not conform to the stepattribute
        tooLong: false, // the user has edited a too-long value in a field with maxlength
        tooShort: false, // the user has edited a too-short value in a field with minlength
        typeMismatch: false, // value of a email or URL field is not an email address or URL
        valueMissing: false // required field without a value
    };

    // Check if any errors
    var valid = true;
    for (var key in checkValidity) {
        if (checkValidity.hasOwnProperty(key)) {
            // If there's an error, change valid value
            if (checkValidity[key]) {
                valid = false;
                break;
            }
        }
    }

    // Add valid property to validity object
    checkValidity.valid = valid;

    // Return object
    return checkValidity;

};

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

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

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

تست badInput

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

badInput: (isNum && length > 0 && !/[-+]?[0-9]/.test(field.value))

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

تست patternMismatch

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

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

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

patternMismatch: (field.hasAttribute('pattern') && length > 0 && new RegExp(field.getAttribute('pattern')).test(field.value) === false)

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

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

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

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

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

مهرداد نادری

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

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

موفق باشید

قالب وردپرس

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

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

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.