تبدیل اعتبار سنجی به کلاس

پرسیده شده
فعالیت 932 روز پیش
دیده شده 294 بار
0

سلام. من اعتبار سنجی فرم رو با استفاده از کلاس ها پیاده سازی کردم.

سوال اولم اینه که تو خط آخر که کلاس رو فراخوانی میکنم، استفاده به این شکل درست هست؟ چون معمولا دیدم که کلاس رو وقتی new میکنن داخل یک متغیر میریزن.

سوال دوم هم اینه که کاربر، با این کلاسی که من نوشتم، وقتی ارور رو ببینه و اصلاحش نکنه و بره روی یک فیلد دیگه، متن ارور پاک میشه (به خاطر متد removePreviousErrors).

چجوری میتونم چک کنم که کاربر حتما ارور رو رفع کرده باشه و اگه رفع نکرده بود، متن ارور پاک نشه؟

 

class formValidator{
    messages = {
        patternMismatch: () => 'مقدار ورودی با الگو همخوانی ندارد!,
        valueMissing: () => 'این فیلد، اجباری است!',
        tooShort: (target) => `مقدار ورودی، کمتر از ${target.minLength} کاراکتر است.`
    };
    validityKeys = Object.keys(this.messages);
    forms = document.querySelectorAll('form[data-validation]');

    constructor() {
        this.forms.forEach(form => {
            form.addEventListener('input', (e) => {
                const {target} = e;
                this.removePreviousErrors();
                this.checkInputsForErrors(target);
            })
        });
    }

    checkInputsForErrors(target) {
        this.validityKeys.forEach((key) => {
            if (target.validity[key]) {
                this.generateError(target, key);
            }
        });
    }

    generateError(target, key) {
        let error = document.createElement('small');
        error.classList.add('error');
        error.innerText = this.messages[key](target);
        target.parentElement.append(error)
    }

    removePreviousErrors() {
        const errors = document.querySelectorAll('small.error');
        errors.forEach(error => {
            error.remove();
        })
    }
}

new formValidator;

 

 

 

فایل پیوست

محمد افضلی
محمد افضلی

24 مهر 00

0
حذف شده

سلام

فراخوانی و نوشتن کلاس به این صورت خیلی جالب نیست. یکی از اهداف اصلی constructor مقدار دهی اولیه هست 

 

برای اینکه removePreviousErrors متن ارور ها رو پاک نکن خوب منطقا اولین کاری که میشه انجام داد یه if یا حالا با هر طریقی چک بکنیم که آیا مشکل برطرف شده یا نه و بعد اون تابع رو فراحوانی بکنی

 

برای اینکه متوجه بشید ارور دارید یا نه بازم اینم میتونی مثلا یک تابع اضافه بکنی که چک بکن آیا ارور داره یا نه و اگر نداشت ارور رو پاک بکنی

 

نمونه این مورد رو هم که در آموزش ها پیاده سازی شده و میتونی از اون ها الگو بگیری و متناسب با نیازت تغییر بدی

فایل پیوست

مجتبی سوری

توسط

مجتبی سوری

26 مهر 00

جلسه پیاده سازی اعتبار سنجی همه فیلدهای فرم