آموزش اعتبارسنجی فرم‌ها در جاوااسکریپت؛ Form Validation حرفه‌ای

فرم‌ها دروازه ورود اطلاعات به سیستم شما هستند و اگر درب آن‌ها نگهبان نداشته باشید، داده‌های ناقص و اشتباه وارد دیتابیس می‌شود. اعتبارسنجی سمت کاربر با جاوااسکریپت دو مزیت بزرگ دارد: کاربر بلافاصله بازخورد می‌گیرد و نیازی نیست برای هر خطا صفحه رفرش شود و سفر به سرور انجام گیرد. البته به یاد داشته باشید اعتبارسنجی سمت سرور هم همیشه ضروری است و این دو مکمل هم‌اند.

جلوگیری از ارسال پیش‌فرض فرم

اولین قدم در اعتبارسنجی دستی، کنترل رویداد submit و جلوگیری از رفتار پیش‌فرض مرورگر با preventDefault است تا ابتدا داده‌ها را بررسی کنیم و بعد تصمیم بگیریم فرم ارسال شود یا نه:

const form = document.querySelector("#register-form");

form.addEventListener("submit", function(event) {
    event.preventDefault();

    if (validateForm()) {
        console.log("همه چیز درست است و فرم ارسال می‌شود");
        // form.submit();
    }
});

خواندن و پاک‌سازی مقادیر ورودی

مقدار هر فیلد با value خوانده می‌شود. قبل از هر بررسی، فاصله‌های اضافی را با trim حذف کنید تا کاربری که فقط چند فاصله تایپ کرده، سیستم را فریب ندهد:

const nameInput = document.querySelector("#name");
const emailInput = document.querySelector("#email");

const nameValue = nameInput.value.trim();
const emailValue = emailInput.value.trim();

بررسی خالی نبودن و طول ورودی

ساده‌ترین و رایج‌ترین قانون، اجباری بودن فیلدهاست. برای رمز عبور معمولاً حداقل طول هم در نظر می‌گیریم تا امنیت اولیه حفظ شود:

function validateForm() {
    if (nameValue === "") {
        showError(nameInput, "وارد کردن نام الزامی است");
        return false;
    }

    const password = document.querySelector("#password").value;
    if (password.length < 8) {
        showError(password, "رمز عبور باید حداقل ۸ کاراکتر باشد");
        return false;
    }

    return true;
}

محصول اورجینال INZIP

قالب وردپرس باریستا مخصوص کافه تم نسکافه ای روشن (دو زبانه)

دانلود پوسته وردپرس باریستا؛ قالب کافیشاپ، رُستری قهوه و فروشگاه قهوه دوزبانه با منوی رومیزی، رزرو آنلاین میز با کد پیامکی و ووکامرس. طراحی اختصاصی inzip.ir

تحویل آنی آپدیت رایگان بدون قفل لایسنس پشتیبانی واقعی

۳,۹۹۰,۰۰۰ تومان ۲,۹۶۰,۰۰۰ تومان

بازدید و دانلود آنی

٪۲۶

تخفیف ویژه

سود شما

۱,۰۳۰,۰۰۰ تومان

اعتبارسنجی ایمیل با الگو

برای بررسی ساختار کلی ایمیل می‌توان از یک عبارت منظم ساده استفاده کرد. این بررسی سمت کاربر کافی است و تأیید نهایی همیشه با سرور انجام می‌شود:

function isValidEmail(email) {
    const emailRegex = /^[\w.]+@[\w]+\.[a-z]{2,}$/i;
    return emailRegex.test(email);
}

if (!isValidEmail(emailValue)) {
    showError(emailInput, "ایمیل وارد شده معتبر نیست");
    return false;
}

نمایش پیام خطا به کاربر

تجربه کاربری خوب یعنی پیام خطا دقیقاً کنار همان فیلد نمایش داده شود و فیلد خطادار با رنگ مشخص شود. تابعی می‌نویسیم که این کار را استاندارد انجام می‌دهد:

function showError(input, message) {
    const group = input.parentElement;
    const error = group.querySelector(".error-message");

    error.textContent = message;
    input.classList.add("invalid");

    // پاک شدن خطا به محض شروع تایپ مجدد
    input.addEventListener("input", function() {
        error.textContent = "";
        input.classList.remove("invalid");
    }, { once: true });
}

گزینه once: true باعث می‌شود شنونده رویداد فقط یک بار اجرا شده و خودش حذف شود؛ تکنیکی تمیز برای جلوگیری از تلنبار شدن شنونده‌ها.

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

به‌جای صبر کردن تا لحظه ارسال، می‌توانید با رویداد input یا blur بازخورد فوری بدهید. مثلاً بررسی قدرت رمز عبور در لحظه تایپ، راهنمای خوبی برای کاربر است:

const passwordInput = document.querySelector("#password");
const strengthText = document.querySelector("#strength");

passwordInput.addEventListener("input", function() {
    const value = passwordInput.value;

    if (value.length >= 12 && /\d/.test(value)) {
        strengthText.textContent = "رمز قوی";
    } else if (value.length >= 8) {
        strengthText.textContent = "رمز متوسط";
    } else {
        strengthText.textContent = "رمز ضعیف";
    }
});

همه‌کاره با رویداد change و focus

ترکیب رویدادها تجربه را کامل می‌کند: focus برای راهنمایی کاربر هنگام ورود به فیلد، blur برای بررسی هنگام خروج از آن و change برای فیلدهای انتخابی مانند شهر یا جنسیت. همچنین صفت‌های HTML5 مانند required و type=email لایه اول دفاعی را بدون یک خط جاوااسکریپت فراهم می‌کنند و استفاده از هر دو روش با هم بهترین نتیجه را می‌دهد.

جمع‌بندی

اعتبارسنجی فرم ترکیبی از چند مهارت است: کنترل رویداد submit، پاک‌سازی ورودی، قوانین بررسی، نمایش خطای روان و بازخورد بلادرنگ. با پیاده‌سازی دقیق همین الگو، کاربران شما هنگام پر کردن فرم‌ها تجربه‌ای حرفه‌ای و بدون سردرگمی خواهند داشت و دیتای سالم‌تری به سرور می‌رسد.