فصل ۳۰ | فرم‌ها و ورودی‌ها

اعتبارسنجی خودکار بدون جاوااسکریپت

مرورگرهای امروزی می‌توانند پیش از ارسال فرم، برخی قوانین ساده را بدون نیاز به کد جاوااسکریپت بررسی کنند؛ این کار با چند ویژگی ساده روی <input> انجام می‌شود.

required — فیلد اجباری

اگر این ویژگی روی یک فیلد باشد، فرم بدون پر شدن آن ارسال نمی‌شود و مرورگر یک پیام خطای پیش‌فرض نمایش می‌دهد.

required.html
<input type="text" name="username" required>

min، max و step — محدوده‌ی عددی

min-max.html
<input type="number" min="1" max="10" step="1">

pattern — الگوی سفارشی

با یک عبارت باقاعده (Regular Expression) می‌توان قالب دقیق مورد قبول برای یک فیلد را مشخص کرد؛ مثلاً محدود کردن ورودی به فقط سه حرف انگلیسی.

pattern.html
<input type="text" pattern="[A-Za-z]{3}" title="فقط سه حرف انگلیسی وارد کنید">

اعتبارسنجی خودکار بر اساس نوع

بعضی مقادیر type خودشان به‌طور پیش‌فرض قالب را بررسی می‌کنند؛ مثلاً type="email" بدون هیچ تنظیم اضافه‌ای، وجود علامت @ را در مقدار وارد‌شده بررسی می‌کند.

email-validation.html
<input type="email" name="user_email" required>
نکته: اعتبارسنجی سمت مرورگر برای تجربه‌ی کاربری بهتر مفید است، اما هرگز جایگزین بررسی مجدد داده‌ها در سمت سرور نیست؛ چون کاربر می‌تواند این محدودیت‌ها را در مرورگر دور بزند.