FutureForgeFutureForge

خدمات FutureForge

  • طراحی و ساخت محصولاز شناخت نیاز تا انتشار محصول، یک مسیر روشن پیش رو دارید.
  • توسعه فول‌استکوب‌اپلیکیشن، API و داده را هماهنگ و یکپارچه توسعه دهید.
  • ممیزی مهندسیپیش از هزینه‌ی بیشتر، از وضعیت واقعی محصول‌تان باخبر شوید.
  • مشاوره معماریپیش از یک تصمیم فنی پرهزینه، گزینه‌ها را درست بسنجید.
  • زیرساخت و استقرارمحصول را با خیال راحت منتشر کنید و پایدار نگه دارید.
  • هوش مصنوعی در محصولهوش مصنوعی را فقط جایی به کار می‌گیریم که مسئله‌ای را حل کند.
نمونه‌کارهاقیمت‌گذاریدرباره ما
شروع گفتگو
  1. خانه
  2. /یادداشت‌ها
  3. /یادداشت‌ها
FutureForge

استودیوی مهندسی محصول — طراحی، ساخت و استقرار نرم‌افزار.

خدمات

طراحی سایت با وردپرستوسعه اختصاصیمهندسی محصولزیرساخت و استقرارمشاوره معماریهوش مصنوعی در محصول

راهنمای انتخاب

قیمت‌گذاریتخمین هزینه پروژهمقایسه روش‌هانمونه‌کارهادرباره ماتماس

ارتباط

hello@futureforge.ir

ایده‌ای برای ساخت دارید؟

نیازتان را مطرح کنید تا درباره مسیر توسعه و قدم بعدی صحبت کنیم.

شروع گفتگو

© 2026 FutureForge. همه حقوق محفوظ است.

حریم خصوصیشرایط استفاده
خانهنمونه‌کارشروعتماس
مهندسی محصول

اعتبارسنجی فرم: مرورگر، سرور یا هر دو؟

مرورگر برای بازخورد سریع، سرور برای قاعدهٔ واقعی. جدول «کدام بررسی کجا» بر پایهٔ MDN، OWASP و WCAG برای تجربهٔ خطا و امنیت ورودی.

سا
سهیل ابراهیم‌پور

بنیان‌گذار و مهندس محصول

·۲۶ مهر ۱۴۰۵·4 دقیقه مطالعه
اعتبارسنجی فرمvalidationOWASPWCAGپیام خطا
فرم آنلاین با یک فیلد دارای پیام خطای متنی و نشانگر ایمن‌بودن

«اعتبارسنجی در مرورگر کافی است؟» پاسخ کوتاه: نه. مرورگر برای راحتی کاربر است و سرور برای درستی داده و امنیت. این مقاله دو هدف را جدا می‌کند و جدول «کدام بررسی کجا» می‌دهد. مبانی طراحی فرم در فرم‌های خوب چگونه طراحی می‌شوند؟ آمده و اینجا فقط جایگاه فنی بررسی‌ها را می‌گوییم.

دو هدف جدا

MDN می‌گوید اعتبارسنجی سمت کلاینت بررسی اولیه و بخش مهمی از تجربهٔ کاربری خوب است چون کاربر بلافاصله می‌تواند خطا را اصلاح کند، بدون رفت‌وبرگشت به سرور. در همان صفحه تأکید می‌شود این بررسی را نباید اقدام امنیتی کامل دانست و روی سرور هم باید اعتبارسنجی، از جمله بررسی امنیتی، انجام شود چون دور زدن سمت کلاینت آسان است. OWASP هم در بخش خطاهای رایج می‌نویسد «بررسی فقط سمت کلاینت» خطاست: حتی اگر مرورگر همان فیلدها را بررسی می‌کند، سرور هم باید بررسی کند و سمت کلاینت برای بازخورد فوری است.

کدام بررسی کجا؟

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

در مرورگر: HTML پیش از JavaScript

MDN توضیح می‌دهد HTML با attributeهای اعتبارسنجی می‌تواند فیلد ضروری و قالب معتبر را بدون JavaScript تعیین کند و اعتبارسنجی HTML سریع‌تر از JavaScript است؛ JavaScript معمولاً برای بهبود یا سفارشی‌سازی همان می‌آید. پس مسیر پیشنهادی: اول attributeهای استاندارد، بعد پیام‌های سفارشی.

در سرور: قاعدهٔ واقعی

OWASP چند نکتهٔ دقیق دارد که ارزش دارد در بازبینی کد بپرسید: تبدیل متن به عدد فقط نوع را مشخص می‌کند و مقدار قابل‌قبول را نه؛ حذف یا «تمیزکردن» کاراکترهای مشکوک جای تعریف قاعدهٔ پذیرش هر فیلد را نمی‌گیرد (مثلاً بستن آپوستروف نام‌های معتبر را رد می‌کند بی‌آنکه کوئری را ایمن کند)؛ اعتبارسنجی قالب ایمیل دسترسی به صندوق را اثبات نمی‌کند؛ و برای متن آزاد می‌توان یونیکد گسترده را با محدودیت طول پذیرفت و لازم نیست فقط حرف و عدد مجاز باشد. این آخری برای متن فارسی مهم است: قاعدهٔ «فقط حروف انگلیسی» نام‌های فارسی را رد می‌کند.

پیام خطا

معیار 3.3.1 در WCAG 2.2 (سطح A) می‌گوید اگر خطای ورودی خودکار تشخیص داده شود، آیتم خطادار شناسایی و خطا به‌صورت متن توصیف شود و فقط نمایش دوبارهٔ فرم کافی نیست. معیار 3.3.3 (سطح AA) اضافه می‌کند اگر راه اصلاح شناخته‌شده است باید پیشنهاد داده شود، مگر امنیت یا هدف محتوا را به خطر بیندازد. مثال: «ایمیل باید @ داشته باشد، مثل name@example.com» بهتر از «ورودی نامعتبر» است.

اشتباه‌های رایج

  • اعتماد به مرورگر و حذف بررسی سرور.
  • پیام کلی «خطا» بدون اینکه بگوید کدام فیلد و چه چیزی.
  • تکیه بر رنگ برای نمایش خطا؛ متن لازم است.
  • رد کردن ورودی معتبر فارسی با قاعدهٔ لاتین.
  • تصور اینکه تأیید قالب ایمیل یعنی ایمیل واقعی است.

برای تعریف «آمادهٔ تولید»، Production-Ready را ببینید. اگر می‌خواهید فرم‌های محصولتان را با یک تیم بازبینی کنید، صفحهٔ شروع پروژه را ببینید؛ ارسال فرم تعهدی ایجاد نمی‌کند.

منابع و مراجع

  • Client-side form validation — MDN Web Docs (Mozilla).
  • Input Validation Cheat Sheet — OWASP Cheat Sheet Series.
  • Understanding Success Criterion 3.3.1: Error Identification (WCAG 2.2) — W3C WAI، WCAG 2.2.
  • Understanding Success Criterion 3.3.3: Error Suggestion (WCAG 2.2) — W3C WAI، WCAG 2.2.

نویسنده

سا

سهیل ابراهیم‌پور بنیان‌گذار FutureForge است. روی طراحی محصول، معماری و استقرار نرم‌افزار سفارشی کار می‌کند.

یادداشت‌های مرتبط

یادداشت‌های مرتبط

دسته‌بندی‌ها

خدمات مرتبط

از یادداشت تا پروژه

اگر با مسئله‌ای شبیه این روبه‌رو هستید، درباره‌ی شرایط پروژه‌تان با هم صحبت کنیم.

برای انتخاب مسیر فنی پروژه‌تان کمک می‌خواهید؟

از مسئله و محدودیت‌هایتان بگویید؛ اگر بتوانیم همراهی‌تان کنیم، برای گفت‌وگو هماهنگ می‌کنیم.

سهیل ابراهیم‌پور
یادداشت‌ها
ارزیابی طراحی واکنش‌گرا روی دستگاه‌های واقعی: چک‌لیست چهارلایه
Empty State، Error State و Loading State چیست؟
چرا متن بد می‌تواند حتی یک UI زیبا را خراب کند؟
UX Writing چیست و چرا متن‌های سایت بخشی از تجربه کاربری هستند؟
طراحی لندینگ پیج شرکتی: مسیر روشن از پیام تا تماس

مهندسی محصول

ارزیابی طراحی واکنش‌گرا روی دستگاه‌های واقعی: چک‌لیست چهارلایه

۲۶ مهر ۱۴۰۵

مهندسی محصول

Empty State، Error State و Loading State چیست؟

۲۹ شهریور ۱۴۰۵

مهندسی محصول

چرا متن بد می‌تواند حتی یک UI زیبا را خراب کند؟

۲۹ شهریور ۱۴۰۵

مهندسی محصول

UX Writing چیست و چرا متن‌های سایت بخشی از تجربه کاربری هستند؟

۲۹ شهریور ۱۴۰۵

مهندسی محصول

طراحی لندینگ پیج شرکتی: مسیر روشن از پیام تا تماس

۲۶ مهر ۱۴۰۵
همه یادداشت‌ها239
معماری نرم‌افزار13
واژه‌نامه37
عملیات و استقرار87
مهندسی محصول90
راهنمای وب12
طراحی و ساخت محصول
توسعه فول‌استک
ممیزی مهندسی
مشاوره معماری
زیرساخت و استقرار
شروع گفتگو
ابزارهای رایگان
شروع گفتگو