@dmitriu256

Почему в классе es6 получаю ошибку this.method is not a function?

Почему получаю следующую ошибку?

this.validatePhone is not a function at HTMLInputElement.formValidate

Мой класс
class Validation {
    constructor() {}

    //Validation Form
    formValidate() {

        let names = this.name;
        let check;
        switch (names) {
            case 'name':
                check = /^[А-Яа-яЁёA-Za-z]{3,11}$/.test(this.value);
                break;

            case 'email':
                check = /^[a-zA-Z._-]+\d*@[a-z]+?\.[a-z]{2,3}$/.test(this.value);
                break;

            case 'phone':
                check =  this.validatePhone(this.value); //до реализации на классах был вид validatePhone(this.value) - и все работало
                break;

            //Необязательное поле, может оставаться пустым
            case 'message':
                check = true;
                break;

            default:
                check = false;
        }

        //Проверка валидации
        if (check) {
            this.style.border = '2px solid green';

        } else {
            this.style.border = '2px solid red';
            this.value = '';
        }
    }
    //END Validation Form

    //Phone Validation
    validatePhone(val) {

        let massCode = [67, 96, 97, 98, 50, 66, 95, 99, 63, 73, 93, 91, 92, 94];

        let resCode = massCode.map(function (i) {
            return '0' + i;
        });

        let str = resCode.join('|');

        let reg = new RegExp("/\\+38\\(" + str + "\\)\\-(\d{3})\\-(\d{2})\\-(\d{2})/");

        if (reg.test(val)) {
            return true;
        } else {
            return false;
        }
    }
    //END Phone Validation
}


Вызов класса в главном скрипте
//Обход всех элементов формы
 let validation = new Validation();

        for (let i = 0; i < form.elements.length; i++) {
            if(form.elements[i].type !== 'submit'){
                form.elements[i].setAttribute('required', 'required');
                form.elements[i].addEventListener('blur', validation.formValidate);
            }
        }


Пример простого класса, в котором реализовано подобное поведение, но ошибки не возникает

class Convertor {
    constructor(baseCurrencyBuy, baseCurrencySale) {
        this._baseCurrencyBuy = baseCurrencyBuy;
        this._baseCurrencySale = baseCurrencySale;
    }

    roundToDecimal(amount) { //аналогия this.validatePhone(this.value)
        return Math.round(100 * amount)/100;
    }

    fromTo(currency) {
        return this.roundToDecimal(currency * this._baseCurrencyBuy); //все отлично отрабатывает
    }

    toFrom(currency) {
        return this.roundToDecimal(currency / this._baseCurrencySale );
    }
}
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
@Che603000
c 2011 javascript
у вас в методе валидации попытка использовать два контекста.
один указывает на input - this.value , другой на клас - this.validatePhone, так не пойдет)
измените код чтобы this указывал на класс
formValidate(e) {
        const el = e.target; // элемент на котором произошло событие 
        const { value, name} = el; // значение и имя элемента 
        switch(name){
            case ‘phone’:  ... this.validatePhone(value) ...
        ...
        }
}

при вызове для сохранения контекста на класс, используйте стрелочную функцию
form.elements[i].addEventListener('blur', e=> validation.formValidate(e));
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега JavaScript
Потому что при такой конструкции
form.elements[i].addEventListener('blur', validation.formValidate);
контекст меняется.

В таких случаях — открывайте отладчик и смотрите на что указывает this в месте где возникает ошибка

Чтобы контекст не менялся, нужно сделать примерно так:
form.elements[i].addEventListener('blur', validation.formValidate.bind(validation));
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы